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