1.子元素 absolute/fixed定位后，子元素脱离文档流存在，它让出原来占的那个坑，父元素再也不能通过子元素来撑开高度了
<style>
div{
position:absolute;
}
</style>
<div>
<div style="width:100px;height:100px;background-color:red;">
</div>
<div style="width:100px;height:100px;background-color:green;">
</div>
<div style="width:100px;height:100px;background-color:blue">
</div>
</div>
绝对定位之前:
绝对定位之后:
最外层父元素的宽高为0，因为子元素都绝对定位，脱离文档流存在了。而且绿的div向上浮动覆盖红的div，蓝的div向上浮动，覆盖绿的div，这样覆盖到最后，我们只能看到蓝色的div了
2.元素设置position:absolute或者position:fixed后，元素就脱离文档流了，position:relative则还是在文档流中。
元素脱离文档流之后，会一直像冒泡一样往上浮动，直到碰到还是文档流中的元素，那么定位后的脱离文档流的元素就呆在了文档流中元素的下面了
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
position: fixed;
}
</style>
</head>
<body>
<div>
<div style="width:100px;height:100px;background-color:red;position:static; ">
</div>
<div style="width:100px;height:100px;background-color:green;">
</div>
<div style="width:100px;height:100px;background-color:blue">
</div>
</div>
</body>
</html>
2.1 position:fixed不能覆盖第一个div的position:static,优先级没有行内样式高
2.2 绿色的div和蓝色的div，定位之后，会向上冒泡，直到碰到static定位的红色div后停止冒泡，绿色冒过之后，蓝色的冒泡，由于蓝色div在绿色div的后面，他会无视脱离文档流的元素，直奔红色div而去，所以看上去就像是没有绿色div样滴。