Question

我想要实现的是一个工具提示，例如将元素定位在与该元素相同的容器中，单击该元素将显示一个包含表的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无效。我如何使它工作？通常，我正在寻找在视口中相对于另一个元素定位一个元素的方法。

Answer 1

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

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

使用绝对定位将div放置在另一个div附近

1 个答案: