层叠上下文和z-index

Posted 2021-09-10 star

理解渲染过程和层叠顺序

浏览器会先绘制所有非定位的元素，然后绘制定位元素。默认情况下，所有的定位元素会出现在非定位元素前面。

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