js笔记五十四之获取元素的偏移量offset

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 300px;
            height: 300px;
            margin: 50px auto;
            border: 5px solid #000;
            padding: 50px;
            background: orange;
        }
        #inner{
            width: 200px;
            height: 200px;
            /*margin: 50px auto;*/
            border: 5px solid #000;
            padding: 50px;
            background: yellow;
        }
        #center{
            width: 100px;
            height: 100px;
            /*margin: 50px auto;*/
            border: 5px solid #000;
            padding: 50px;
            background: green;

        }
    </style>
    <div id="outer">
        <div id="inner">
            <div id="center"></div>
        </div>
    </div>
    <script type="text/javascript">
        var outer = document.getElementById("outer"),
            inner = document.getElementById("inner"),
            center = document.getElementById("center");

            // 1. parentNode:父节点 HTML结构层级关系中的上一级元素
            // center.parentNode // -> inner
            // inner.parentNode // -> outer
            // outer.parentNode // -> body

            // 2. offsetParent: 父级参照物 在同一个平面中, 最外层的元素是里面所有元素的父级参照物(和HTML层级结构没有必然的联系)
            // 一般来说一个页面中的所有元素的父级参照物都是body
            // center.offsetParent // -> body
            // inner.offsetParent // -> body
            // outer.offsetParent // -> body
            // document.body.offsetParent // -> null


            // 想要改变父级参照物需要使用position定位来进行改变
            // position: absolute;
            // position: relative;
            // position: fixed;
            // 这几个值都可以把父级参照物进行修改 
            // outer.style.position = "relative";
            // console.log(center.offsetParent); // -> outer
            // console.log(inner.offsetParent); // -> outer
            // console.log(outer.offsetParent); // -> body


            // outer.style.position = "relative";
            // inner.style.position = "relative";
            // console.log(center.offsetParent); // -> inner
            // console.log(inner.offsetParent); // -> outer
            // console.log(outer.offsetParent); // -> body

            
            // null和undefined的区别?
            // null和undefined都代表没有,
            // 但null是属性在但值不存在;undefined是连属性都不存在
            // document.parentNode (浏览器天生自带的一个属性: 父亲节点的属性) -> null -> 因为一个页面中的document已经是最顶级元素了,他没有父亲
            // document.parentnode -> undefined (因为没有parentnode属性)
    </script>