### z-index
z-index并非只對定位元素有效，flex盒子的子元素也可以設置z-index。
層疊的優先級：
層疊上下文background/border < 負z-index < block塊級盒子 < float盒子 < inline盒子 < z-index: auto或者z-index: 0 < 正z-index
層疊規則：
* 誰大誰上：同一個層疊上下文領域內，層疊水平大的在上面
* 后來居上：當層疊水平一致，層疊順序相同時，DOM中后面的元素會覆蓋前面的（比如兩個absolute，后面的會覆蓋前面的，除非前面的z-index比后面的大）。
```
//1在2的上面
//auto所在的div元素就是普通定位元素，子元素層疊不受父級影響，1與2直接套用層疊規則決定順序
<div style="position: relative; z-index: auto;">
<img src="1.jpg" style="position: absolute; z-index: 2;"/>
</div>
<div style="position: relative; z-index: auto;">
<img src="2.jpg" style="position: relative; z-index: 1;"/>
</div>
//2在1的上面
//z-index一旦變成具體的數值，就會創建層疊上下文，這兩個div就形成了兩個層疊上下文，兩個img的比較就變成了兩個父級div的層疊比較，后來居上。
<div style="position: relative; z-index: 0;">
<img src="1.jpg" style="position: absolute; z-index: 2;"/>
</div>
<div style="position: relative; z-index: 0;">
<img src="2.jpg" style="position: relative; z-index: 1;"/>
</div>
```
* 如果層疊上下文元素不依賴z-index數值，則其層疊順序是z-index: auto，可看成z-index: 0級別。
* 如果層疊上下文元素依賴z-index數值，則其層疊順序由z-index值決定。這就是為什么定位元素級別高的原因，定位元素z-index自動變成auto，因此位于正z-index與inline盒子之間。
```
//圖片位于藍色背景色之下
//負z-index < block塊級盒子
<div>
<img/>
</div>
div { background-color: blue; }
img {
position: relative;
z-index: -1;
right: -50px; //為了更方便看到兩個層疊順序
}
//圖片位于藍色背景色之上
//transform: scale讓div變成了層疊上下文，其邊框和背景色 < 負z-index
div { background-color: blue; transform: scale(1) }
```
