关于css中 position: absolute 的小细节

绝对定位

是 相对于最近的一个，拥有定位的上级元素进行定位
而dom元素，默认都是没有定位的，最上层拥有定位的，是body元素
举一个最简单的例子：
<style>
    .main {
        width: 300px;
        height: 300px;
        background-color: cyan;
        /* position: relative; */
        margin-left: 100px;
    }

    .container {
        position: absolute;
        top: 60px;
        width: 200px;
        height: 200px;
        background-color: coral;
    }
</style>
<body>
    <div class="main">
        <div class="container" />
    </div>
</body>

在这段代码中，当切换 .main 元素的 position: relative; 属性时，会发现其子级 .container 元素上下跳动。

因为当.main 元素具有position属性时，子元素相对于.main元素定位，由于浏览器的body默认有margin:8px 的属性，其相对于浏览器视窗的顶部为68px。

而当父元素不具有position属性时，.container元素会查找最近的具有定位的元素，也就是body元素，此时相对于浏览器顶部的距离为60px。

包裹特性

当元素拥有position: absolute;样式时，若没有指定宽高，其宽高会根据子元素的宽高进行调整，为完全包裹子元素的最小宽高。

 

posted @ 2022-01-20 23:02  Bin_x  阅读(163)  评论(0)    收藏  举报