CCS深入2堆叠上下文

堆叠顺序

text-indent同级比较越往后出现的层级越高，高层级的其他内容

也比他的低层级的内容的层级高

background
border
块级
浮动
内联
z-index: 0
z-index: +
如果是兄弟元素重叠，那么后面的盖在前面的身上。

插入网站图片

堆叠上下文

可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触

发堆叠上下文，但并不知道堆叠上下文是什么。

根元素 (HTML),

z-index 值不为 "auto"的 绝对/相对定位，

一个 z-index 值不为 "auto"的 flex 项目 (flex item)，

即：父元素 display: flex|inline-flex，

opacity 属性值小于 1 的元素（参考 the specification 
for opacity），

transform 属性值不为 "none"的元素，

mix-blend-mode 属性值不为 "normal"的元素，

filter值不为“none”的元素，

perspective值不为“none”的元素，

isolation 属性被设置为 "isolate"的元素，

position: fixed

在 will-change 中指定了任意 CSS 属性，即便你没有直接指定

这些属性的值（参考 这篇文章）
    
-webkit-overflow-scrolling 属性被设置 "touch"的元素

堆叠上下文对z-index得影响

参考1

参考2