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

我想得到一个元素相对于其父元素的位置。为此，我使用jquery

位置函数

创建了一个

在这把小提琴中，我正在访问

#child

元素的

左上方
位置。它应该返回
top:0和left:0
，因为它是
#p
元素的子元素，其位置是相对的，但它返回
top:223px和left:1px
。有人能帮我吗？
这里是调整
问题是您没有将父对象的位置指定为相对位置。所以孩子的位置是根据身体来计算的

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


#全科医生{
宽度：500px；
高度：200px；
保证金：0；
边框：1px纯黑；
背景颜色：灰色；
溢出：隐藏；
}
#p{
宽度：600px；
高度：自动；
浮动：左；
位置：相对位置；
}
#孩子{
位置：相对位置；
}
jQuery（文档）.ready（函数（）{
警报（$（“#子项”）.position（）.top++$（“#子项”）.position（）.left）；
});
可能是这样的：

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

如果你不想改变你的CSS架构，那就看看我的吧！