jQuery 中的 position() 和 offset() 有什么区别？

在 jQuery 中，position() 和 offset() 都用来获取元素相对于文档或父元素的位置，但它们的计算方式有所不同。

offset()

offset() 方法返回元素相对于文档的位置。它的计算方式是将元素的边框相对于文档的边框进行计算。例如：

var $element = $('#element');
var offset = $element.offset();

返回的 offset 对象包含两个属性：top 和 left，分别表示元素的顶部和左侧相对于文档的位置。

position()

position() 方法返回元素相对于父元素的位置。它的计算方式是将元素的边框相对于父元素的边框进行计算。例如：

var $element = $('#element');
var position = $element.position();

返回的 position 对象包含两个属性：top 和 left，分别表示元素的顶部和左侧相对于父元素的位置。

区别

区别在于计算方式不同，一个相对于文档，一个相对于父元素。因此，当元素有定位父元素时，它们返回的结果就有所区别。

例如，当有如下 HTML 结构：

<div id="parent" style="position: relative;">
  <div id="element" style="position: absolute; top: 50px; left: 50px;"></div>
</div>

此时，当执行如下代码：

var $element = $('#element');
var offset = $element.offset();     // { top: 50, left: 50 }
var position = $element.position(); // { top: 50, left: 50 }

因为父元素 #parent 的 position 属性为 relative，而子元素 #element 的 position 属性为 absolute，所以 position() 和 offset() 返回的结果是相同的，表示元素相对于文档的位置。

但是，当我们将父元素的 position 属性改为 static （默认值）：

<div id="parent">
  <div id="element" style="position: absolute; top: 50px; left: 50px;"></div>
</div>

此时，当执行如下代码：

var $element = $('#element');
var offset = $element.offset();     // { top: 50, left: 50 }
var position = $element.position(); // { top: 50, left: 50 }

offset() 依然表示元素相对于文档的位置，但此时的 position() 表示元素相对于父元素的位置，所以它们的返回值就不同了。

总结一下：

• offset()：返回元素相对于文档的位置。
• position()：返回元素相对于父元素的位置。
• 当元素没有定位父元素时，它们的返回结果相同。
• 当元素有定位父元素时，它们的返回结果会有所区别。