共计 806 个字符，预计需要花费 3 分钟才能阅读完成。
网上的答案个别都是说，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，即不显示
正文完