css 层叠上下文和层叠顺序

层叠上下文是css中的一个三维概念，拥有层叠上下文的元素在z轴上比普通元素要高，而且其内部的所有内容是自成体系的，其后代都是在它的层叠顺序中

哪些元素拥有层叠上下文

1、根元素，也就是html默认拥有“根层叠上下文”

2、定位元素（position: absolute/relative/fixed）的z-index不为auto，而是有具体数值时

3、拥有某些css3属性的元素

• z-index不为auto的 flex item
• opacity的值小于1的元素
• transform不为none
• filter不为none
• isolation的值是isolate
• mix-blend-mode不为normal
• 设置了will-change
• 元素的-webkit-overflow-scrolling设为touch.

举个例子，如一个opacity:0.6的元素是层叠上下文，在一个普通元素的上面

<div style="background: blue; opacity: 0.6;">div1</div>
<div style="background: red; margin-top: -80px">div2</div>

上面只是一个比较简单的规则，在实际中有各种元素，那在css中不同元素的层叠顺序是怎样的呢？

css中元素的层叠顺序

css中的元素的层叠顺序，自底向上，遵循如下排列规则：

1. border/background等装饰在最下面
2. 接着是z-index为负的元素
3. block块状水平盒子元素
4. float盒子元素
5. inline、block-inline元素
6. z-index为auto/0、不依赖z-index的层叠上下文元素
7. z-index为正的元素

这个规则不用死记硬背，结合每种元素的作用便很好理解&记忆了

• border和background通常用作装饰，所以优先级最低，接着是z-index为负的元素
• block盒子和float通过用来定位布局，而inline通常是重要的文本内容，所以有消极比block和float高
• 接着就是z-index为0或auto的元素或没有z-index的普通层叠上下文元素了
• 最高的就是z-index为正的元素了

按照上面的层叠顺序，如有冲突的话，遵循这两个规则即可：

1、z-index大者居上

2、后来者居上

z-index

z-index定义了元素在z轴上的顺序，值越大，元素的层级越高越靠上。但需要注意的是：z-index只有在定位元素和flex item上才生效，在其他元素是即便设置了也没有用。

如下，两个层叠上下文，第一个的z-index大，但第一个还是在下面：

<div style="background: blue;transform: translateX(50px);z-index: 5">div1</div>
<div style="background: red;transform: translateY(-80px);z-index: 1">div2</div>

而且元素一旦拥有定位，其z-index就会生效，auto被视为0级别（但实际上不是0，只是视为，此时元素还不是层叠上下文），flex item元素同理。

所以即便一个元素只设置了定位，还不是层叠上下文，但是此时该元素的z-index已经被视为0了，所以该元素会在普通元素的上面。

参考：

• 深入理解CSS中的层叠上下文和层叠顺序