如何訪問元素相對於其父元素的位置

Question

我想獲取元素相對於其父元素的位置。因此，對於這個我使用jquery position function我創建了一個JsFiddle.

在這撥弄我正在訪問#child元素的top & left位置。它應該返回top : 0 and left : 0，因爲它是#p元素的子元素，它的位置是相對的，但它返回top : 223px and left : 1px。誰能幫幫我嗎 ？

Answer 1

這裏是調整 問題是你沒有指定父母的位置作爲親屬。所以孩子立場是相對於計算出身體

<style type="text/css"> 
#gp { 
    width: 500px; 
    height: 200px; 
    margin: 0; 
    border: 1px solid black; 
    background-color:gray; 
    overflow:hidden; 
} 

#p { 
    width: 600px; 
    height: auto; 
    float: left; 
    position: relative; 
} 

#child{ 
    position: relative; 
} 
</style> 

<div id="gp"> 
<div id="p"> 
    <div id="child"> 
    </div> 
</div> 
</div> 

jQuery(document).ready(function(){ 
    alert($("#child").position().top + " " + $("#child").position().left); 
}); 

Answer 2

也許是這樣的：

function relative_pos(node) { 
    var parentOf = $(node).parent().offset(); 
    var child = $(node).offset(); 
    return {top: child.top - parentOf.top, left: child.left - parentOf.left}; 
} 

console.log(relative_pos("#child")); 

Try !!!