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

Question

我已经在段落标记内放置了一个跨度，现在位置顶部应该显示为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

Answer 1

从docs

的.position()方法允许我们检索元素relative to the offset parent的当前位置。与.offset()对比，其中retrieves the current position relative to the document。

当将一个新元素放置在另一个元素附近并且位于相同的包含DOM元素中时，.position（）更有用。

如果我们谈论您的方案则：

Currrently都.position()和.offset()具有相同的父，他们将获取文档的偏移位置。

现在，如果你在CSS类的<p>position:relative;增加一个属性，你可以找到区别呢。

简而言之：

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

.position().top将从相对父母中获得最高。（如果父相对设置）

，你可以在这里找到的区别：http://jsfiddle.net/BhsrS/1/

结账小提琴：http://jsfiddle.net/BhsrS/1/

Answer 2

设置p标签的position属性relative：

p { 
    color: green; 
    position: relative; 
} 

http://jsfiddle.net/zPdxB/

Answer 3

jQuery: Difference between position() and offset()

位置referes相对于偏移父这实际上是在您的示例文档的位置，这是因为p不是一个定位元件，而是内联。这就是为什么你回到相同的价值。

如果您让p元素具有绝对或相对定位，则跨度的位置现在将与最初预期的P元素相关，因此与偏移量的值不同。