网上的答案个别都是说，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%。

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

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

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

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

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

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