一 先看定義：
1 offsetParent:HTMLElement.offsetParent 是一個只讀屬性，返回一個指向最近的（closest，指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 爲最近的 table 元素對象或根元素（標準模式下爲 html；quirks 模式下爲 body）。當元素的 style.display 設置爲 “none” 時，offsetParent 返回 null。offsetParent 很有用，因爲 offsetTop 和 offsetLeft 都是相對於其內邊距邊界的
2 offsetLeft:HTMLElement.offsetLeft 是一個只讀屬性，返回當前元素左上角相對於 HTMLElement.offsetParent 節點的左邊界偏移的像素值。
3 offsetWidth offsetHeight 指的是當前元素的邊框大小，包括content(height,width)+padding+border
二 看一下代碼解釋：
<style>
*{
margin:0 ;
padding: 0 ;
}
#bigdv {
margin-left: 150px;
margin-top: 50px;
padding-left: 17px;
padding-top: 23px;
width: 300px;
height: 300px;
background-color: green;
border:30px red solid;
/*position: absolute;*/
}
#dv {
margin-left: 100px;
margin-top: 100px;
padding-left: 13px;
padding-top: 12px;
width: 100px;
height: 100px;
background-color: pink;
border:10px red solid;
/*position: absolute;*/
}
</style>
<body>
<div id="bigdv">
<div id="dv"></div>
</div>
</body>
第一種情況，子級元素和父級元素都沒有定位：此時內部的盒子的 offsetLeft值是 297 ；offsetTop 值是 203；offsetWidth 133 ,offsetHeight 132;(也就是包含當前 dv 元素的不是定位元素，那麼是 dv 的盒子邊界（border邊界） 是相對於根元素邊界的距離
第二種情況，如果父級元素定位了，子級元素沒有定位：此時 內部的盒子的 offsetLeft值是 117 ；offsetTop 值是 123；offsetWidth 133 ,offsetHeight 132;（也就是說，此時盒子是相對於當前元素的父元素（因爲父元素定位了，不在相對於根元素）的邊界，相對的是父元素盒子的border內邊界的距離）
第三種情況，如果父元素定位了，子元素也定位了，並且改變了子元素的定位 left top 值：(如果不設置left和top那麼offsetLeft和offsetTop還是117 123）
#dv {
margin-left: 100px;
margin-top: 100px;
padding-left: 13px;
padding-top: 12px;
width: 100px;
height: 100px;
background-color: pink;
border:10px red solid;
position: absolute;
left: 10px;
top:10px;
}
此時 內部的盒子的 offsetLeft值是 110 ；offsetTop 值是 110；offsetWidth 133 ,offsetHeight 132;
第四種情況，父元素沒有定位，子元素定位：
#dv {
margin-left: 100px;
margin-top: 100px;
padding-left: 13px;
padding-top: 12px;
width: 100px;
height: 100px;
background-color: pink;
border:10px red solid;
position: absolute;
}
此時內部的盒子的 offsetLeft值是 297 ；offsetTop 值是 203；offsetWidth 133 ,offsetHeight 132;
如果設置了 子元素定位的 left 和 top
#dv {
margin-left: 100px;
margin-top: 100px;
padding-left: 13px;
padding-top: 12px;
width: 100px;
height: 100px;
background-color: pink;
border:10px red solid;
position: absolute;
left: 10px;
top: 10px;
}
內部的盒子的 offsetLeft值是 110 ；offsetTop 值是 110；offsetWidth 133 ,offsetHeight 132;
三 ：其實offset系列問題也不難，主要需要理解兩點：
1 子元素的定位基準問題，參考http://blog.csdn.net/qq_35809245/article/details/53637512
2 offsetLeft指的是子元素的邊界，相對於父元素的邊界，這兩個邊界到底指哪裏
其實歸根到底總結爲兩種情況，
a 如果父級元素沒有定位，那麼子元素的offsetLeft指的是子元素的 (content +padding+border)的border外邊界相對於根元素 body 的邊界的距離
b 如果父級元素有定位，那麼子元素的 offsetLeft 指的是子元素的（content+padding+border)的border邊界距離父元素* border 內邊界的距離，如果沒有border 則是相對於父元素的padding外邊界*的距離。
四 offsetWidth 和 offsetHeight 指的是當前元素的 content+padding+border 的寬度和高度
大家仔細琢磨一下吧。