Question

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.

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

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>

Answer 1

The position of the div is relative to the innermost container with its position set. So in this case, it’s ending up 200px rightwards and downwards from divMain. Without position set on divMain, it’s positioned relative to body.

If you want it right below the link, put both the link1 and div1 inside an element with position. So change it to this:

<div id="divMain">
    <div style="position:relative;">
        <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:0px;top:16px;">div 1</div>
    </div>
</div>

(Note that I pop it down by 16px still, to put it below the link.)

So this means now that div1 is 0px,16px from the div I added, rather than from divMain.