I'm having difficulty getting a color picker JavaScript widget to function properly within a webpage that contains unchangeable elements. Some of these elements are causing the color picker to be displayed far below the link once clicked. Here is a simplified example.
The desired behavior is for "div1" to move directly below "link 1" when it is clicked. However, in reality, "div1" appears well below "link 1". If the position: relative; styling is removed from the CSS definition for divMain, then "div1" is correctly positioned.
Is there a way to position "div1" directly beneath "link 1" without removing the position: relative; styling?
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";
}h1 {
height: 50px;
}
#divMain {
position: relative;
}<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>