javascript - 使用绝对定位将一个 div 定位在另一个 div 附近

Question

我想要实现的是一个工具提示，例如定位一个元素，该元素位于与元素相同的 contain 内，单击该元素将显示包含表格的 div。

完整代码可以在这里找到: http://jsbin.com/xihebol

当有人点击 .child-table-link 时，.child-data-table-container 应该相对于点击的链接定位。

我在 .child-table-link 的点击处理程序中执行此操作:

var _this = $(this);
$(".child-data-table-container").css({
          "left": _this.offset().left - ($(this).width / 2),
          "top": _this.offset().top
})

top 有效，但 left 无效。我如何让它发挥作用？在视口(viewport)中相对于另一个元素定位元素的一般方法是我正在寻找的。

Answer 1

问题是您计算的左侧位置错误，“左侧”将是工具提示容器左边缘的位置，因此如果您希望它位于链接的左侧，只需设置为工具提示容器的负宽度。检查一下:

.canvas {
  display: flex;
  align-items: center;
  justify-content: center;
}

.linkContainer {
  position: relative;
  background: #000;
}

.tooltip {
  position: absolute;
  width: 100px;
  height: 100px;
  background: green;
  top: 0;
  left: -100px;
}

<div class='canvas'>
  <div class='linkContainer'>
    <a href='#'>LINK</a>
    <div class='tooltip'></div>
  </div>
</div>

注意工具提示的宽度是 100px，左边是 -100px。