jquery - .position() 和 .offset() 之间的区别以及有趣的观察？

Question

问题:.offset() 和 .position() 有什么区别？

我阅读了一些相关文档，但我仍然不清楚这两者之间的真正区别是什么。我会要求对此进行简单的解释。

我的观察:

我编写了一段 JavaScript 代码，并将其放置在网页(.aspx)本身中。 javascript 基本上是设置模式弹出窗口的位置。在该代码中，我使用 .position() 来获取 div 的位置，我将在其中放置模态弹出窗口。现在，这里有一个转折 - 当我将 javascript 代码移到一个单独的 js 文件中时，.position() 根本无法正常工作，而是我使用了 .offset() 并且工作正常。

我想请求对此做出解释？

Answer 1

这取决于元素所在的上下文。position 返回相对于 offset 父级的位置，offset 相对于文档执行相同的操作。显然，如果文档是偏移父文档(通常是这种情况)，那么它们将是相同的。

但是，如果您有这样的布局:

 <div style="position: absolute; top: 200; left: 200;">
     <div id="sub"></div>
 </div>

那么 sub 的偏移量将为 200:200，但其位置将为 0:0。

希望这是有道理的。