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;?
