关于css:body下的position到底相对于谁定位

网上的答案个别都是说，position 会绝对于其外层第一个设置了 position 不为 static 的元素来定位。但我感觉这样的答复还是比拟含混。position 的定位其实能够分为两种：一种是父元素设置了定位，另一种是父元素都没设置定位。

接下来咱们看一道题来进行细说。请问以下代码显示进去的成果是怎么样的？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <style>
    .demo1{
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        height: 100%;
        background-color: black;
    }
    .demo2{
        margin-left:-300px;
        background-color: red;
        height: 100%
    }
    </style>
</head>
<body>
    <div class="demo1"></div>
    <div class="demo2"></div>
</body>
</html>

先来颁布答案

为什么设置了 absolute 的元素能够显示，而没有设置的却不能显示？明明它们的 width 都是设置了 100%。

元素绝对于根元素定位（即 html 元素）
其宽高百分比将依据 浏览器可视宽高 进行计算。

所以能够看到，即便咱们没有为 html 或 body 进行高度的设置，也是能够失常显示 demo1。

元素会绝对于 离本人最近 的设置了 绝对或相对 定位的父元素进行定位
宽高则依据父元素的盒子宽高（content + padding）（不含 border！）进行百分比计算。

所以当咱们为 body 设置相对定位，demo1会绝对于 body 定位，并且宽高也会绝对于 body 来设置。然而因为 body 没有设置宽高，所以 demo1 的高为 0，即不显示

关于css:body下的position到底相对于谁定位

在所有父元素没有设置绝对定位或相对定位的状况下

父元素设置了绝对定位或相对定位的状况下