为什么我在 jQuery 中的偏移量和位置得到相同的值？答案

【问题标题】：Why i am getting same value in offset and position in jQuery?为什么我在 jQuery 中的偏移量和位置得到相同的值？
【发布时间】：2025-11-29 23:20:02
【问题描述】：

我在段落标签内放置了一个跨度，现在位置顶部应显示为 0，偏移量应显示其他值（需要从文档计算），但我在两者中得到相同的值...

我错了吗？

这是我的代码：

HTML：

<div></div>
<p>paragraph<span>span</span>paragraph</p>

jquery：

$('span').click(function(){
console.log($(this).position().top,$(this).offset().top)
})

CSS:

p{
  color:green;
}

span{
  color:red;
}

div{
  height:100px;
  border:2px solid blue;
}

jsfiddle here

【问题讨论】：

标签： jquery

【解决方案1】：

将p标签的position属性设置为relative：

p {
  color: green;
  position: relative;
}

http://jsfiddle.net/zPdxB/

【讨论】：

【解决方案2】：

jQuery: Difference between position() and offset()

Position 是指相对于 offset parent 的位置，这实际上是您的示例中的文档，因为 p 不是定位元素，而是内联元素。这就是为什么你会得到相同的值。

如果你让你的 p 元素具有绝对或相对定位，span 的位置现在将与你最初预期的一样相对于 P 元素，因此与 offset 不同。

【讨论】：

【解决方案3】：

来自docs

.position() 方法允许我们检索元素relative to the offset parent 的当前位置。

将此与.offset() 进行对比，retrieves the current position relative to the document。

当将一个新元素定位在另一个元素附近并且在同一个包含 DOM 元素中时，.position() 更有用。

如果我们谈论您的场景，那么：

目前.position() 和.offset() 拥有相同的父级，它们将获得文档的偏移位置。

现在如果你在 <p> position:relative; 的 css 类中再添加一个属性，你就会发现不同之处。

简而言之：

.offset().top 将从文档中获取顶部。

.position().top 将从相对父级获取顶部。（如果父级相对设置）

你可以在这里找到不同之处：http://jsfiddle.net/BhsrS/1/

检查小提琴：http://jsfiddle.net/BhsrS/1/

【讨论】：