jQuery：position（）和offset（）之间的区别

178

之间有什么区别 position()和offset()？我试图在click事件中执行以下操作：

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

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

jquery positioning

— v
source

215

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

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

例如，对于此文档：

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

然后$('#sub').offset() 将会是{left: 200, top: 200}，但是.position()将会是{left: 0, top: 0}。

— 大卫·赫德伦德
source

2

因此，偏移父级是位置设置为绝对值的第一个父级吗？要么？

— Svish 2010年

1

@Svish：哇，我真的错过了代码缩进吗？谢谢编辑。是的，偏移父母是最接近定位父。也就是说，位置设置为绝对，相对或固定（但不是静态）的元素。这不是jQuery甚至不是javascript，在CSS中的行为相同：如果将sub绝对位置设置为0：0，则它将位于偏移父级的左上角。

— David Hedlund 2010年

1

仅供参考，.position得到了在1.12.0 =>更新github.com/jquery/jquery/issues/1708

— retrovertigo

这不是本能的观点吗？太武断了！对我来说，绝对的“观点”是立场。相对“点”是偏移量。

— 桑德堡

28

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

— 安迪
source

3

如上所述，什么是偏移父级？似乎在另一个div内的第一个div上调用position（）并不总是返回0,0-即使没有其他样式或定位正在进行。

— Kokodoko 2014年

2

“ jquery.offsetParent（）：api.jquery.com/offsetparent ”获取所定位的最接近的祖先元素。

— 柯蒂斯·雅洛普

-6

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

offset（）是指相对于文档的位置。

position（）指相对于其父元素的位置

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

— 外包
source

6

纠正：偏移量和位置返回的对象具有left和top属性，而不是width和height。

— Jorge Olivares 2015年