position：absolute 的深入探讨

2023-08-05 10:05:28

position：absolute 参考谁进行定位的问题。之前大家可能会认为如果absolute元素的父级（祖父）元素没有设置position属性的时候，该元素的position：absolute会参考body进行定位。

换句话说是如果父级设置了position（且值为非static），参照（最近的）父级的内容区域的左上角为初始点，结合top left right bottom 进行定位；如果没有设置，往其父级继续寻找，直到找到为止，如果一直没有，则相对与body进行定位（我猜想是这样的，但是不一定是对哦~~）。

测试实例：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        /*正常是不能这么设置的，这边主要是用来测试*/
        html {
            margin: 20px;
            border: 20px solid red;
        }
        /*正常是不能这么设置的，这边主要是用来测试*/
        body {
            height: 400px;
            margin: 30px;
            border: 20px solid green;
        }
        .wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="wrap">梦幻雪冰</div>
</body>
</html>

为了再次验证我们的结论，我们给body设置position属性（值为非static），看看结果会是如何？

测试实例：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        /*正常是不能这么设置的，这边主要是用来测试*/
        html {
            margin: 20px;
            border: 20px solid red;
        }
        /*正常是不能这么设置的，这边主要是用来测试*/
        body {
            position: relative;
            height: 400px;
            margin: 30px;
            border: 20px solid green;
        }
        .wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="wrap">梦幻雪冰</div>
</body>
</html>

测试结果：

Tips：图中红色边框为html元素，绿色边框为body元素

看到结果，发现如果给body设置了position属性就正常了，所以我之前的猜想是错误的，不是参考body进行定位的。

那么position：absolute是参考哪一个父级（祖父）元素进行定位的？

当给元素设置absolute的时候，它会往上查找 absolute 元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么就是根据该父元素进行的定位，否则将会继续查找该父元素的父元素，一直追溯到某个父元素具备不为 static 的 position 值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。

码农公寓

相关文章