<div id="outer">
    <div id="inner">
        <div id="center"></div>
    </div>
</div>
<script>
    var outer = document.getElementById("outer"),
        inner = document.getElementById("inner"),
        center = document.getElementById("center");
    // 父親節(jié)點(diǎn) HTML結(jié)構(gòu)層級(jí)關(guān)系中的上一級(jí)元素
</script>

1、 父親節(jié)點(diǎn)： parentNode HTML結(jié)構(gòu)層級(jí)關(guān)系中的上一級(jí)元素
center.parentNode //-> inner
inner.parentNode //-> outer
outer.parentNode //-> body
body.parentNode //-> html
documentElement.parentNode //-> document
document.parentNode //-> null
2、父級(jí)參照物： offsetParent在同一個(gè)平面中，最外層的元素市里面所有元素的父級(jí)參照物，跟HTML的層級(jí)結(jié)構(gòu)沒有必然聯(lián)系，一般頁面中所有元素的父級(jí)參照物都是body，body的父級(jí)參照物是null
center.offsetParent //-> body
inner.offsetParent //-> body
outer.offsetParent //-> body
可以通過position定位來改變父級(jí)參照物
position值為absolute, relative, fixed都可以修改父級(jí)參照物
3、offsetLeft/offsetTop距離當(dāng)前元素外邊框父級(jí)參照物內(nèi)邊框的偏移量

那么要獲取一個(gè)元素距離body的左偏移，就需要先計(jì)算他到父級(jí)參照物的左偏移再加上父級(jí)參照物的左邊框，依次往上累加，直到body。
在標(biāo)準(zhǔn)IE8瀏覽器中，offsetLeft和offsetTop中已經(jīng)包含了邊框，就不需要自己再加一遍

function offset(curEle) {
        var totalLeft = null, totalTop=null;
        totalLeft += curEle.offsetLeft;
        totalTop += curEle.offsetTop;
        while(curEle.offsetParent){
            curEle = curEle.offsetParent;
            // 累加父級(jí)參照物的邊框及偏移
            if(navigator.userAgent.indexOf("MSIE 8.0") === -1){
                totalLeft += curEle.offsetLeft;
                totalTop += curEle.offsetTop;
            }else {
                totalLeft += curEle.clientLeft + curEle.offsetLeft;
                totalTop += curEle.clientTop + curEle.offsetTop;
            }
        }
        return {left: totalLeft, top: totalTop};
}