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

给设置了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的范围。

猜你喜欢

转载自blog.csdn.net/csm0912/article/details/82659210