定义
层叠上下文（Stacking Context）是 HTML 元素的一个三维概念，它决定了元素在 Z 轴上的层叠顺序。每个层叠上下文都包含一组元素，这些元素按照一定的规则在 Z 轴上进行排列，从而决定了它们在页面上的显示顺序。
核心特点
- 层叠上下文可以包含其他层叠上下文。
- 层叠上下文是一个独立的渲染单元，内部元素的层叠顺序只受自身层叠上下文的影响。
- 层叠上下文的根元素决定了其内部元素的层叠顺序。
如何创建层叠上下文？
以下 CSS 属性可以创建一个新的层叠上下文：
- 根元素
<html> position属性为absolute或relative，且z-index值不为autoposition属性为fixed或stickydisplay属性为flex或inline-flex，且该元素是 flex 容器，z-index值不为autodisplay属性为grid，且该元素是 grid 容器，z-index值不为autoopacity属性小于 1transform属性不为nonefilter属性不为noneisolation属性为isolatewill-change属性指定了任意 CSS 属性（即使你没有直接改变它的值）contain属性的值为layout、paint或包含它们其中之一的复合值
层叠顺序
在同一个层叠上下文中，元素的层叠顺序由以下规则决定（从下到上）：
- 背景和边框： 根元素的背景和边框。
- 负 z-index：
z-index值为负数的定位元素。 - 块级元素： 非定位的块级元素。
- 浮动元素： 非定位的浮动元素。
- 行内元素： 非定位的行内元素。
- z-index: 0：
z-index值为 0 的定位元素。 - 正 z-index：
z-index值为正数的定位元素。
Tip
注意：不同层叠上下文之间，z-index 是互不干扰的。
应用场景
- 控制元素的层叠顺序： 可以通过设置元素的
z-index属性来控制其在层叠上下文中的层叠顺序。 - 创建模态框： 可以通过创建一个新的层叠上下文来创建模态框，使其覆盖页面上的其他元素。
- 实现动画效果： 可以通过改变元素的
z-index属性来实现动画效果，使其在层叠上下文中移动。
示例
<div style="position: relative; z-index: 1;">
<div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: lightblue;"></div>
</div>
<div style="position: relative; z-index: 2;">
<div style="position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background-color: lightgreen;"></div>
</div>注意事项
- z-index 只对定位元素有效：
z-index属性只对position属性为absolute、relative、fixed或sticky的元素有效。 - 层叠上下文的根元素决定了其内部元素的层叠顺序： 如果一个元素不在任何层叠上下文中，那么它的层叠顺序由根元素
<html>决定。 - 避免过度使用 z-index： 过度使用
z-index可能会导致代码的复杂性增加，难以维护。
问答卡片
- Q1：什么是层叠上下文？
z-index如何工作？ - A：层叠上下文是 CSS 中用于控制元素前后关系的独立上下文环境。它由 position + z-index、transform、opacity 等属性触发。每个层叠上下文中的子元素只在其内部进行层叠排序，不能影响外部元素。理解它的本质有助于我们排查遮挡 bug，比如模态框被底层内容盖住、tooltip 无法显示在最上层等问题。”
- Q2：为什么
z-index: 9999也被遮住了？ - A：不同层叠上下文间互不影响，被遮挡元素可能处在一个低层级的层叠上下文中
参考资料
- MDN Web Docs: https://developer.mozilla.org/
- CSS Tricks: https://css-tricks.com/