网上的答案一般都是说，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，即不显示
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。