javascript - 如何访问元素相对于其父元素的位置

Question

我想获取元素相对于其父元素的位置。所以为此我使用 jquery position function 我创建了一个 JsFiddle.

在这个 fiddle 中，我正在访问 #child 元素的 top & left 位置。它应该返回 top : 0 和 left : 0 因为它是 #p 元素的子元素并且它的位置是相对的但是它返回 top : 223px 和 left : 1px。谁能帮帮我？

Answer 1

这是调整问题是您没有将 parent 的职位指定为相对职位。所以 child 的位置是相对于 body 计算的

<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);
});