body有无position:relative对相对于其定位的元素的影响

程序员文章站 2022-04-25 11:37:45

...

给设置了postion:absolute的元素相对于 static 定位以外的第一个父元素进行定位，如果找不到这样的一个父元素，则相对于body定位。但是这是body设置了position了没有设置position是有区别的。
如：

<style>
    body {
        height: 3000px;
        /* position: relative; */
    }
    .son {
        positon: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: red;
    }
</style>
<body>
    <div class="son"></div>
</body>

如果body没有设置除position之外的其他值，则设置了position:absolute;的元素占据的位置由当前窗口大小决定。
如果body设置了position:relative;(或其他非static的值)，则设置了position:absolute;的元素则是整个body的范围。