关于css:层叠上下文和zindex

了解渲染过程和层叠程序

浏览器会先绘制所有非定位的元素，而后绘制定位元素。默认状况下，所有的定位元素会呈现在非定位元素后面。

用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为正的定位元素（及其子元素）