了解渲染过程和层叠程序
浏览器会先绘制所有非定位的元素,而后绘制定位元素。默认状况下,所有的定位元素会呈现在非定位元素后面。
用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为正的定位元素(及其子元素)