JavaScript offsetParent属性

发表于

学过CSS的朋友都知道，当一个节点使用绝对定位后，那么他的定位参考系就是离他最近的且使用了绝对或相对定位的直系祖先节点。当没有这样的节点的时候，那么定位参考系为BODY节点。

这句话好像比较绕口，那就举个例子。比如A节点使用绝对定位，left:50px;top:40px;如果他的直系祖先节点中有使用了相对或绝对定位的节点P。那么，此时A节点的位置是相对P左上顶点向右偏移50px，向下偏移40px。如果没有这样的节点，那么A的位置就是相对BODY节点进行定位。
这里的offsetParent就类似这样的效果，这个属性会返回离调用对象最近的进行过CSS定位的直系祖先节点。如果没有这样的节点，会返回BODY节点。

调用对象没有被CSS定位过的直系祖先节点

<body onload="document.getElementById('test').offsetParent">    //返回BODY
    <div>
        <span id="test"></span>
    </div>
</body>

调用对象有被CSS定位过的直系祖先节点

<body onload="document.getElementById('test').offsetParent">    //返回DIV
    <div style="position:absolute;">    //或者position:relative;
        <span id="test"></span>
    </div>
</body>
<body onload="document.getElementById('test').offsetParent">    //返回P
    <p style="position:absolute;">    //或者position:relative;
        <span>
            <span id="test"></span>
        </span>
    </p>
</body>

这个属性非常有用，通过这个属性，可以很方便获取到定位元素的定位参考系，方便计算位置信息