offset元素的偏移量

<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");
    // 父亲节点 HTML结构层级关系中的上一级元素
</script>

1、 父亲节点： parentNode HTML结构层级关系中的上一级元素
center.parentNode //-> inner
inner.parentNode //-> outer
outer.parentNode //-> body
body.parentNode //-> html
documentElement.parentNode //-> document
document.parentNode //-> null
2、父级参照物： offsetParent在同一个平面中，最外层的元素市里面所有元素的父级参照物，跟HTML的层级结构没有必然联系，一般页面中所有元素的父级参照物都是body，body的父级参照物是null
center.offsetParent //-> body
inner.offsetParent //-> body
outer.offsetParent //-> body
可以通过position定位来改变父级参照物
position值为absolute, relative, fixed都可以修改父级参照物
3、offsetLeft/offsetTop距离当前元素外边框父级参照物内边框的偏移量

那么要获取一个元素距离body的左偏移，就需要先计算他到父级参照物的左偏移再加上父级参照物的左边框，依次往上累加，直到body。
在标准IE8浏览器中，offsetLeft和offsetTop中已经包含了边框，就不需要自己再加一遍

function offset(curEle) {
        var totalLeft = null, totalTop=null;
        totalLeft += curEle.offsetLeft;
        totalTop += curEle.offsetTop;
        while(curEle.offsetParent){
            curEle = curEle.offsetParent;
            // 累加父级参照物的边框及偏移
            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};
}