Question

我正在尝试让一个颜色选择器javascript小部件在页面中工作，其中有一堆“东西”，我无法改变。一些“东西”导致颜色选择器在点击时显示在链接下方。我把它简化为一个简单的例子。

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

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

Answer 1

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>

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

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

相对div内的动态定位

1 个答案: