爲什麼我在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元素相關，因此與偏移量的值不同。