Javascript offsetLeft详情

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body, div {
            padding: 0px;
            margin: 0px;
        }

        #div1 {
            width: 100px;
            height: 100px;
            background: #000000;
            padding: 50px;
            border: 20px solid red;
            margin: 30px;
            float: right;
        }

        #p1 {
            width: 300px;
            height: 100px;
            background: #ababab;
            padding: 50px;
            border: 20px solid red;
            margin: 30px;
            float: right;
            clear: both;
        }

        #inner {
            width: 100px;
            height: 100px;
            background: yellow;
            float: right;
        }

        #p2 {
            width: 300px;
            height: 100px;
            background: #ababab;
            padding: 50px;
            border: 20px solid red;
            /*margin: 30px;*/
            position: absolute;
            left: 100px;
            top: 100px;
            clear: both;
        }

        #inner2 {
            width: 100px;
            height: 100px;
            background: gray;
            float: right;
        }
    </style>
</head>
<body>
    <div id="div1">

    </div>
    <div id="p1">
        <div id="inner"></div>
    </div>
    <div id="p2">
        <div id="inner2"></div>
    </div>
    <script src="../Script/jquery-2.1.1.js"></script>
    <script type="text/javascript">
        //算出偏移量,首先选参照物
        //产生偏移量 margin,float,position长长的标准留逻辑
        //parentNode和offsetParent不一定是一码事,；不过，标准流，他们的offsetParent都是body，除非他的父元素做了定位（相对或者绝对 ==relative 和absoulte）
        var oDiv = document.getElementById('div1');
        var ch = oDiv.offsetLeft;//距离盒子的边框外侧；浮动也会产生偏移量
        console.log(ch);

        var parent = oDiv.offsetParent;
        console.log(parent);
        console.log(parent.offsetLeft);
        var oInner = document.getElementById('inner');
        console.log(oInner.offsetLeft);
        console.log(oInner.offsetParent);//
        console.log(oInner.parentNode);

        var oInner2 = document.getElementById('inner2');
        console.log(oInner2.offsetLeft);
        console.log(oInner2.offsetParent);

　　

    </script>
</body>
</html>

　　

//计算ele这个元素距离浏览最左和上边的偏移量
        function offset(ele) {
            var l = ele.offsetLeft;
            var t = ele.offsetTop;
            //l += ele.offsetParent.offsetLeft;
            //t += ele.offsetParent.offsetTop;
            var p = ele.offsetParent;
            while (p) {
                l += p.offsetLeft;
                t += p.offsetTop;
                p = p.offsetParent;
            }
            return { top:t,left:l }
        }