堆叠上下文

image.png

• 堆叠顺序

  
  堆叠顺序

• 堆叠上下文

堆叠上下文

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

有 z-index 、opacity 才属于堆叠上下文，相当于写了这些属性，他们才参与排名的游戏。。。不然，不跟你玩

可以理解为堆叠作用域。跟 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"的元素

• 堆叠上下文 对 index 的 影响