CSS文档流以及元素层级关系

正常文档流
正常文档流：dom节点在排版布局过程中，block元素从上往下，inline元素自动从左往右的流式排列

<div class="father">
  <div class="son son1">1</div>
  <div class="son son2"> 2 </div>
  <div class="son son3">3</div>
  <div class="son">4</div>
  <div class="son">5</div>
  <div class="son">6</div>
  <div class="son">7</div>
  <div class="son son8">8</div>
</div>

//css
.father{border:1px solid;position:relative;}
.son{background:pink;margin:10px;}

正常文档流.png

position:absolute
给son1加个绝对定位，son1脱离了文档流，并且在文档流里面原来的位置消失不见；层级关系：absolute>正常文档流

.father{border:1px solid;position:relative;}
.son{background:pink;margin:10px;text-align:center}
.son1{position:absolute;background:red;}

absolute.png
position:fixed
给son2加个固定定位，son2脱离了文档流，并且在文档流里面原来的位置消失不见后叠在son1上面；层级关系：fixed>absolute>正常文档流

.father{border:1px solid;position:relative;}
.son{background:pink;margin:10px;text-align:center}
.son1{position:absolute;background:red;width:40px}
.son2{position:fixed;background:yellow;}

fixed1.png

ps:有fixed定位的元素是相对于屏幕视口（viewport）的位置来定位的，跟父元素无关。（给son2加个bottom：400px如图下）

.father{border:1px solid;position:relative;}
.son{background:pink;margin:10px;text-align:center}
.son1{position:absolute;background:red;width:40px}
.son2{position:fixed;background:yellow;bottom:400px}

fixed2.png
float

.father{border:1px solid;position:relative;display:float}
.son{background:pink;margin:10px;text-align:center;float:left}
.son1{position:absolute;background:red;width:40px} 
.son2{position:fixed;background:yellow;}

float.png

flex

.father{border:1px solid;position:relative;display:flex}
.son{background:pink;margin:10px;text-align:center;}
.son1{position:absolute;background:red;width:40px} 
.son2{position:fixed;background:yellow;}

flex.png

由以上可以看出，float的父元素没有高度且脱离了正常文档流。flex父元素有高度（高度为子元素撑起的高度）没有脱离正常流。所以层级关系：fixed>absolute>float>flex正常文档流