相对div内的动态定位答案

【问题标题】：Dynamic positioning inside relative div相对div内的动态定位
【发布时间】：2017-09-07 22:56:45
【问题描述】：

我试图让一个颜色选择器 javascript 小部件在一个页面中工作，其中包含一堆我无法更改的“东西”。单击时，某些“东西”会导致颜色选择器显示在链接下方。我将其简化为下面的一个简单示例。

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

如何在不删除position: relative; 的情况下将“div 1”直接放在“link 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>

【问题讨论】：

标签： javascript css positioning

【解决方案1】：

div 的位置是相对于其位置设置的最里面的容器。所以在这种情况下，它从 divMain 向右和向下 200px 结束。没有在 divMain 上设置位置，它是相对于 body 定位的。

如果你想把它放在链接的正下方，把 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>

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

所以这意味着现在 div1 距离我添加的 div 为 0px,16px，而不是来自 divMain。

【讨论】：