### 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) }
```
