js中offsetParent详解

最新推荐文章于 2020-04-30 09:52:31 发布

明明是地主家的傻儿子

最新推荐文章于 2020-04-30 09:52:31 发布

阅读量2.6w

点赞数 11

分类专栏： js css 文章标签： javascript css

js 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

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

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

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

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

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

【4】<body>元素的offsetParent是null

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
 <div id="test1" style="position:fixed"></div>

 <div id="test2"></div>

 <div id="div0" style="position:absolute;">
    <div id="div1" style="position:absolute;">
        <div id='test3'></div>    
    </div>    
</div>

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

</script>
</body>

</html>

3. IE7中对于定位的offsetParent，存在以下bug

【1】当元素本身经过绝对定位或相对定位，且父级元素无经过定位的元素时，IE7-浏览器下，offsetParent是<html>

<div id="test1" style="position:absolute;"></div>    
<script>
//IE7-浏览器返回<html>，其他浏览器返回<body>
console.log(test1.offsetParent);
</script>

<div id="test2" style="position:relative;"></div>    
<script>
//IE7-浏览器返回<html>，其他浏览器返回<body>
console.log(test2.offsetParent);
</script>

<div id="test3" style="position:fixed;"></div>    
<script>
//firefox并没有考虑固定定位的问题，返回<body>，其他浏览器都返回null
console.log(test3.offsetParent);
</script>

【2】如果父级元素存在触发haslayout的元素或经过定位的元素，且offsetParent的结果为离自身元素最近的经过定位或触发haslayout的父级元素

<div id="div0" style="display:inline-block;">
    <div id='test'></div>    
</div>
<script>
//IE7-浏览器返回<div id="div0">，其他浏览器返回<body>
console.log(test.offsetParent);
</script>

<div id="div0" style="position:absolute;">
    <div id="div1" style="display:inline-block;">
        <div id='test'></div>    
    </div>    
</div>
<script>
//IE7-浏览器返回<div id="div1">，其他浏览器返回<div id="div0">
console.log(test.offsetParent);
</script>

<div id="div0" style="display:inline-block;">
    <div id="div1" style="position:absolute;">
        <div id='test'></div>    
    </div>    
</div>
<script>
//所有浏览器都返回<div id="div1">
console.log(test.offsetParent);
</script>

转载地址为：http://www.cnblogs.com/xiaohuochai/p/5828369.html