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

Question

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

在这个 fiddle 中，我正在访问#child元素的顶部和左侧位置。它应该返回 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);
});