jQuery：位置（）和偏移量（）之间的区别答案

【问题标题】：jQuery: Difference between position() and offset()jQuery：位置（）和偏移量（）之间的区别
【发布时间】：2011-03-13 05:37:29
【问题描述】：

position() 和 offset() 有什么区别？我尝试在点击事件中执行以下操作：

console.info($(this).position(), $(this).offset());

而且它们似乎返回完全相同...（单击的元素在表格中的表格单元格内）

【问题讨论】：

【解决方案1】：

.offset() 方法允许我们检索元素相对于文档 的当前位置。将此与 .position() 进行对比，后者检索 相对于偏移父级的当前位置。当在现有元素之上放置一个新元素以进行全局操作（特别是实现拖放）时，.offset() 更为有用。

【讨论】：

如上所述，什么被认为是偏移父级？似乎在另一个 div 内的第一个 div 上调用 position() 并不总是返回 0,0 - 即使没有其他样式或定位正在进行。
jquery.offsetParent(): api.jquery.com/offsetparent "获取定位的最近的祖先元素。"

【解决方案2】：

它们是否相同取决于上下文。

显然，如果文档是偏移父级（通常是这种情况），则它们将是相同的。 offset parent 是“最近定位的包含元素”。

例如，用这个文件：

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

那么$('#sub').offset() 将是{left: 200, top: 200}，但它的.position() 将是{left: 0, top: 0}。

【讨论】：

那么偏移父级是第一个将位置设置为绝对的父级？还是？
@Svish：哇，我真的错过了代码缩进吗？谢谢你的编辑。是的，偏移父级是最近的定位父级。也就是说，位置设置为绝对、相对或固定（但不是静态）的元素。这不是 jQuery 甚至不是 javascript 的东西，你在 css 中有相同的行为：如果你将 sub 绝对定位为 0:0，那么它将位于偏移父级的左上角。跨度>
仅供参考，.position 在 1.12.0 中更新 => github.com/jquery/jquery/issues/1708
这不是与本能的观点相反吗？这太随意了！对我来说，绝对的“点”是一个位置。一个相对的“点”是一个偏移量。

【解决方案3】：

这两个函数都返回一个具有两个属性的普通对象：宽度和高度。

offset() 指的是相对于文档的位置。

position() 指的是相对于其父元素的位置

但是当对象的 css 位置为“绝对”时，两个函数都将返回 width=0 & height=0

【讨论】：