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

时间:2012-10-12 07:25:38

标签: javascript jquery css

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

在这个小提琴中,我正在访问top & left元素的#child位置。它应该返回top : 0 and left : 0,因为它是#p元素的子元素,它的位置是相对的,但它返回top : 223px and left : 1px。有人可以帮帮我吗?

2 个答案:

答案 0 :(得分:2)

这是调整 问题是你没有将父母的位置指定为亲属。所以孩子的位置是根据身体计算的

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

答案 1 :(得分:0)

也许是这样的:

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 !!!