层叠上下文和z-index

理解渲染过程和层叠顺序

浏览器会先绘制全部非定位的元素，而后绘制定位元素。默认状况下，全部的定位元素会出如今非定位元素前面。

用z-index控制层叠顺序

1. 拥有较高z-index的元素出如今拥有较低z-index的元素前面。拥有负数z-index的元素出如今静态元素后面。
2. z-index只在定位元素上生效，不能用它控制静态元素。
3. 给一个定位元素加上z-index能够建立层叠上下文。

层叠上下文

一个层叠上下文包含一个元素或者由浏览器一块儿绘制的一组元素。其中一个元素会做为层叠上下文的根，好比给一个定位元素加上z-index的时候，它就变成了一个新的层叠上下文的根。全部后代元素就是这个层叠上下文的一部分。

层叠上下文以外的元素没法叠放在层叠上下文内的两个元素之间。

1.层叠上下文的根
2.z-index为负的定位元素（及其子元素）
3.非定位元素
4.z-index为auto的定位元素（及其子元素）
5.z-index为正的定位元素（及其子元素）