js中offsetParent详解

1. offsetParent（返回元素的偏移容器）定义

offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute、relative、fixed），如果其父元素中不存在定位则offsetParent为：body元素。

2. 根据定义分别存在以下几种情况

【1】元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null）

【2】元素自身无fixed定位，且父元素也不存在定位，offsetParent为元素

【3】元素自身无fixed定位，且父元素存在定位，offsetParent为离自身最近且经过定位的父元素

【4】元素的offsetParent是null

 

    
    Document

 

 

 
 

 
 

    

        
    
    
    

 

    /*
    【1】元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null）
    */
    var test1 = document.getElementById('test1');
    console.log('test1 offsetParent: ' + test1.offsetParent);
    /*
    【2】元素自身无fixed定位，且父元素也不存在定位，offsetParent为元素
    */
    var test2 = document.getElementById('test2');
    console.log('test2 offsetParent: ' + test2.offsetParent);
    /*
    【3】元素自身无fixed定位，且父元素也不存在定位，offsetParent为元素
    */
    var test3 = document.getElementById('test3');
    console.log('test3 offsetParent: ' + test3.offsetParent);
    /*
    【4】元素的offsetParent是null
    */
     */
    console.log('body offsetParent: ' + document.body.offsetParent);//null