Dynamic positioning inside relative div
Posted
by ian
on Stack Overflow
See other posts from Stack Overflow
or by ian
Published on 2010-04-30T22:58:00Z
Indexed on
2010/04/30
23:07 UTC
Read the original article
Hit count: 258
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;?
© Stack Overflow or respective owner
