javascript - 相对div内部的动态定位

我正在尝试使颜色选择器javascript小部件在页面上工作，并且其中包含一堆我无法更改的“东西”。单击某些“材料”会使颜色选择器显示在链接下方。我将其简化为下面的简单示例。

应该发生的是，当您单击“链接1”时，“ div1”应直接移到“链接1”下方。实际上发生的是“ div 1”出现在“ link 1”下方。如果从position: relative;的CSS定义中删除divMain，则“ div 1”的位置正确。

如何在不删除position: relative;的情况下将“ div 1”直接放置在“链接1”下方？

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>

最佳答案

div的位置相对于设置了其位置的最里面的容器。因此，在这种情况下，它从divMain向右下方向下移动200px。在divMain上未设置位置的情况下，它相对于主体定位。

如果要在链接正下方，请将link1和div1都放在具有位置的元素内。因此，将其更改为：

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

（请注意，我仍将其向下弹出16像素，以将其放置在链接下方。）

因此，这意味着现在div1从我添加的div（而不是divMain）开始为0px，16px。