CSS中元素的堆叠顺序

在CSS中，元素的堆叠顺序是指当多个元素重叠在一起时，哪些元素会显示在其它元素之前。

CSS中规定，堆叠顺序是由元素的层叠上下文，以及元素的层叠级别来决定的。下面我们来看一下这两个概念的具体含义。

层叠上下文：
在Web页面中，每个元素都是一个独立的图层。但并不是每个元素都有自己的层叠上下文，只有一些特定的元素才会创建层叠上下文。具体来说，以下方式可以创建层叠上下文：
1. 根元素（元素）
2. z-index属性值不为auto的定位元素（例如position: absolute）
3. 带有opacity属性值小于1的元素
4. transform/fliter属性值不为none的元素
5. mix-blend-mode属性值不为normal的元素

层叠级别：
每个元素在层叠上下文中都拥有一个层叠级别。默认情况下，每个元素的层叠级别都是0。如果一个元素比另一个元素具有更高的层叠级别，那么它会覆盖在它下面的元素上方。
可以使用z-index属性来设置元素的层叠级别。层叠级别最高的元素会被放置在最上面，即最后面被渲染。

总而言之，当多个元素发生重叠时，层叠上下文和层叠级别的组合，是决定哪些元素会显示在前面的关键。