jQuery 中 offset 和 position 有什么区别？

jQuery 的 offset() 方法和 jQuery 的 position() 方法在本质上是相似的。这两种方法都可以应用于可见元素，并且都返回包含整数坐标属性（top 和 left）的对象。

尽管这两种方法有一些相似之处，但 jQuery 的 offset() 方法与 jQuery 的 position() 方法有所不同。 offset() 方法检索相对于文档的当前位置，而 position() 方法检索元素相对于父元素的当前位置。

在讨论区别之前，让我们先讨论这两种 jQuery 方法。

jQuery offset() 方法

jQuery offset() 方法用于获取第一个匹配元素相对于文档的当前偏移量。它通常用于拖放功能。offset() 方法提供了两种方法：设置或返回所选元素相对于文档的偏移坐标。

返回偏移量： 当此方法用于返回偏移量时，它返回第一个匹配元素的偏移坐标。

设置偏移量： 当此方法用于设置偏移量时，它设置所有匹配元素的偏移坐标。

jQuery position() 方法

jQuery position() 方法允许我们检索元素相对于父元素的当前位置。它返回第一个匹配元素的位置。此方法返回一个具有两个属性的对象：以像素为单位的 top 和 left 位置。

当我们需要在同一包含 DOM 元素中将新元素放置在另一个元素附近时，position() 方法会更有用。

jQuery offset() 与 jQuery position()

现在，让我们同时看一个使用 position() 方法和 offset() 方法的示例。

示例

在此示例中，我们正在对给定的 h2 元素应用 position() 和 offset() 方法，以查找其位置和偏移量。有两个按钮，分别名为 Position 和 Offset，它们分别返回 h2 元素的 top 和 left 坐标值。

position() 方法给出相对于父元素的坐标，而 offset() 方法提供相对于文档的坐标。

输出

执行上述代码后，输出将是 -

点击 Position 按钮后，输出将是 -

点击 Offset 按钮后，输出将是 -