定义

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

然而，在使用中往往会发现，有的元素明明是z-index：999999，但是仍然会被一些z-index：1的元素覆盖，why？

按照我个人理解，原因是z-index有其作用域，因此数值大的不一定在前面，它只会和同作用域的元素比较。下面具体分析一下（而不是用我造的词）。

stacking contexts

stacking contexts是元素的上下文。当我们给元素一个z-index，那么这个值只会和在相同 context下的其他元素竞争，如果是更高的竞争则交给其context进行比较。

css的设计和ps其实有点像，z-index是元素的层级，stacking contexts是元素所在的组。层级只在当前组下生效。

创建上下文的方法

如果啥样式都没写（html标签自动创建一个上下文），那么整个html页面只有一个上下文，z-index也就全局生效了。但是很多情况下，我们需要创建新的上下文来避免元素突破容器，或者会无意中创建了上下文导致元素的z-index无效。所以了解上下文创建方法就很有必要了，常见方法如下：

• 设置了transform，filter，perspective，clip-path，mask / mask-image / mask-border等样式属性
• 透明度设置为小于1的值
• position为absolute/relative并设置了z-index，或position为sticky/fixed
• 父容器为flex或者grid，且自身设置了z-index
• 设置isolation: isolation属性（常用于上下文封装）

更多的直接看文档吧：developer.mozilla.org/en-US/docs/…

排查工具

推荐一款chrome插件：CSS Stacking Context inspector

优点：用起来足够简单明了，而且可以告诉选择元素上下文创建的原因及跳转到代码
缺点：功能并不是很强大，只能起到辅助作用