层叠上下文是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中的元素的层叠顺序，自底向上，遵循如下排列规则：
- border/background等装饰在最下面
- 接着是z-index为负的元素
- block块状水平盒子元素
- float盒子元素
- inline、block-inline元素
- z-index为auto/0、不依赖z-index的层叠上下文元素
- 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了，所以该元素会在普通元素的上面。
参考：