一、offsetParent
先簡單的來個結構,三個嵌套的div，主要是找div3的offsetParent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0;padding: 0}
div {padding: 50px}
#div1 {background: red}
#div2 {background: green}
#div3 {background: blue}
</style>
</head>
<body>
<div id="div1">div1
<div id="div2">div2
<div id="div3">
div3
</div>
</div>
</div>
<script type="text/javascript">
var oDiv3=document.getElementById('div3');
alert(oDiv3.offsetParent)
</script>
</body>
</html>offsetParent不像parentNode那樣性格好，它有許多情況需要分析。
1、在標準瀏覽器下（火狐，chrome，ie8及以上）：
（1）div3所以祖先節點都沒有定位的情況下，offsetParent是body
（2）div3的所有祖先節點中，如果有節點存在定位屬性時，則offsetParent就是有定位祖先節點，並且遵循就近原則，即假如div1，div2都存在定位，則div3的offsetParent是div2，部分絕對定位或者相對定位。這個就不貼圖了，可以自己測試。
（3）假如div2設置了position，但是div1設置了zoom：1，觸發了haslayout百度一下，你就知道了
但最終還是有position的元素是offsetParent，畢竟這是在標準下！！
2、ie6、7下，(⊙o⊙)…凡是碰到ie6、7的都會忍不住‘’哎‘’
分爲div3自身是否有定位。
（1）自身有定位：
①所有祖先節點無定位，則offsetParent是html，如果祖先節點有定位，則還是遵循標準的，則offsetParent是有定位的父級。
②即使祖先節點有觸發haslayout
可以用設置zoom：1觸發，也可以用其他來觸發。
（2）本身無定位
當div3的所有祖先節點中，如果有觸發haslayout，那麼offsetParent就是那個觸發了haslayout的節點，即使有節點設置了定位，畢竟這是在非標準下。
如果無處發、無定位，則是body
暈了半會兒，繼續說offsetLeft
二、offsetLeft（當前元素到offsetParent的距離）
1、在標準瀏覽器下：
（1）如果offsetParent是body的話，那麼offsetLeft是元素到html的左距離
（2）如果offsetParent是有定位的元素，那麼offsetLeft是元素到定位元素的距離。
2、非標準下：準備%>_<%吧
（1）當前元素無定位：
①祖先節點無定位，offsetLeft是元素到body的距離
②祖先節點的定位，是絕對還是相對，所產生的offsetLeft也是不一樣的。
③會受到haslayout的影響
（2）當前元素有定位：
①不會受到haslayout的影響
②父節點無定位，則offsetLeft是元素到html的距離。
三、總結（隨着時光的流逝，我相信不會再分非標準了）
好吧，兩個東西，卻扯出了這麼多兼容問題，反正我頭已經打大了，可惡的ie啊！！所以在寫代碼的時候，要注意這兩點：
1、html和body保持一樣的樣式，這個只要書寫規範，一般都可以做到。
2、在ie低版本中，給當前元素加相對定位。
