I'm trying to get a color picker javascript widget working in a page with a bunch of "stuff" in it that I can't change. Some of the "stuff" is causing the color picker to appear well below the link when clicked. I've reduced it to a simple example below.
<html>
<head>
<script type="text/javascript">
function setPos(aname,dname) {
var o=document.getElementById(aname);
var ol=o.offsetLeft;
while ((o=o.offsetParent) != null) {
ol += o.offsetLeft;
}
o=document.getElementById(aname);
var ot=o.offsetTop + 25;
while((o=o.offsetParent) != null) {
ot += o.offsetTop;
}
document.getElementById(dname).style.left = ol + "px";
document.getElementById(dname).style.top = ot + "px";
}
</script>
<style>
h1 {height: 50px;}
#divMain {position: relative;}
</style>
</head>
<body>
<h1></h1>
<div id="divMain">
<a href="#" onClick="setPos('link1','div1');return false;" name="link1" id="link1">link 1</a>
<div id="div1" style="position:absolute;border-style:solid;left:200px;top:200px;">div 1</div>
</div>
</body>
</html>
What's supposed to happen is when you click "link 1", "div1" should move directly below "link 1". What actually happens is that "div 1" appears well below "link 1". If you remove position: relative; from the CSS definition for divMain, "div 1" is positioned correctly.
How can I position "div 1" directly beneath "link 1" without removing position: relative;?