为什么.offset（）的位置是不可预测的

Question

我在项目中遇到了这个问题：

我正在实现这个功能：当点击一个元素A时，另一个元素B将显示在A旁边。代码逻辑将是这样的：

eleB.offset({top: eleA.offset().top, left: eleA.offset().left + eleA.width() + 10});
eleB.show();

在css中

#eleB {
    position: absolute;
}

元素B的位置似乎无法预测，并不总是与eleA一起。当我打印出eleB的偏移时，数字似乎无处可去。每次位置都不同，即使eleA永远不会改变。

我使用.css（）作为替代方案，效果很好。

只想知道为什么.offset（）得到了一些不可预测的输出。

谢谢！

Answer 1

.offset()是元素相对于document边界的位置。

如果A offsetTop让我们说800，点击A，您尝试定位到B的{​​{1}}元素就会出现嗯...到那个顶级位置。
如果它位于页面中某个位置的父级内，则top: A-offset顶部将与800px的位置不匹配。
如果您将A直接作为B子项而不是800 px，则移动的B将与确切的A位置匹配

<强> Same parent - demo
的 B in body - demo