js offsetTop和offsetLeft实例分析

offsetTop：以 CSS 像素为单位返回元素上边框距其 offsetParent 上边框的距离。 
offsetLeft：以 CSS 像素为单位返回元素相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
 
这里最主要的是找准 offsetParent。
其实很简单，比如我们要计算A元素的 offsetTop， 那么先要找到A元素的offsetParent，A元素的offsetParent应该是离A元素最近的父元素，并且父元素设置了position：relative或absolute属性，如果没有匹配到任何父元素，那么应该以窗口为基准计算元素的offsetTop。

下面用实例来说明：
 

<code>;

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">


<div id="main">
    <div id="first" style="width:300px; height:200px; border:1px solid red">300X200的盒子</div>
    <div id="second">
        <div id="third">offsetTop详解</div>
    </div>
</div>
<script type="text/javascript">
    var oTop=document.getElementById("third").offsetTop;//此时获取id为third元素的offsetTop，是以窗口基准，即得到的值是该元素距离窗口的垂直距离(202px, 算上了id为first元素的border)。
    var oLeft=document.getElementById("third").offsetLeft; //以窗口基准，值为10px(body设置了10px的左内边距)。
    //下面我们改变一下id为second元素的css，加上"style='position:relative;padding-left:100px'"，然后重新获取id为third元素的offsetTop，此时值为0；因为现在不是以窗口基准，而是以id为third元素为基准计算。同理offsetLeft的值是100px;
</script>

 </code>