做为走上前端不归路的我，以前只是认为offsetTop是元素的左边框至包含元素offsetParent的左内边框之间的像素距离，同理offsetRight是相对于上内边框。那么问题来了，包含元素offsetParent究竟是谁呢？
是我太天真还是天后知后觉！
其实：
页面中的元素的offsetLeft是离其最近的已经定位的元素，如果没有就相对于body元素计算。例如:
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background: red;
}
#box2{
width: 50px;
height: 50px;
background: green;
margin: 0 auto;
}
</style>
<div class="box1">
<div id="box2">
</div>
</div>
<script type="text/javascript">
var box2 = document.getElementById('box2');
alert(box2.offsetParent.tagName);//输出BODY
alert(box2.offsetLeft);//输出从33
</script>
此时id为box2的div元素的祖先元素中没有已经定位的元素，所以box2的offsetLeft是相对于body元素计算所得的。
下面我们将上面的代码做如下修改
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background: red;
position:relative;
}
#box2{
width: 50px;
height: 50px;
background: green;
margin: 0 auto;
}
</style>
<div class="box1">
<div id="box2">
</div>
</div>
<script type="text/javascript">
var box2 = document.getElementById('box2');
alert(box2.offsetParent.tagName);//输出DIV
alert(box2.offsetLeft);//输出从25
</script>
offsetTop同理。
通过查阅资料我还发现 IE6,IE7 对offsetParent解释有BUG，当祖先元素都不是定位元素且本身是定位元素的时候返回document.documentElement，其他情况终返回document.body：
<body>
<div id="b" style="position:relative">
<div id="a"></div>
</div><!-- a.offsetParent返回b -->
<div id="d">
<div id="c"></div>
</div><!-- c.offsetParent返回document.body -->
<div id="f">
<div id="e" style="position:relative"></div>
</div><!-- e.fsetParent返回document.body 在ie6,ie7中返回document.documentElement -->
</body>
