CSS 中 z-index 的工作原理是什么？

解释 CSS z-index 属性的工作原理及其对元素层叠的影响。

CSS 中等布局层叠层级

z-index 是 CSS 属性，用于控制元素在页面上的层叠顺序，其作用是根据值决定显示优先级，使元素在垂直的 Z 轴上堆叠（数值大者更靠前）。它仅在特定定位的元素上生效，且依赖于「堆叠上下文」机制。以下是具体工作方式:

依赖属性条件：z-index 仅对具有以下定位的元素生效：
- position: relative | absolute | fixed | sticky
- 或作为 CSS Grid 或 Flexbox 的直系子元素时设定具体 z-index 值。
  若元素为 position: static（默认值），z-index 会被忽略。
```
/* 示例: 仅在有定位时才生效 */
.element {
position: relative;
z-index: 10; /* 此项有效 */
}
```
取值范围：
- auto：默认值，不创建堆叠上下文，层级由父级继承。
- <integer>：整数（正负值或零），如 2 或 -1。值越大越前、越小越后（浏览器支持范围： -2147483647 至 2147483647）。
- inherit：直接继承父级 z-index。

「堆叠上下文」（stacking context）是元素的分层分组模型：

创建条件：在满足以下情况时形成新的堆叠上下文，约束子元素的层次关系：
- position 非 static 且 z-index 不为 auto（如 z-index：0）。
- 元素透明度 opacity < 1 时。
- 使用 transform、filter 或 CSS Grid/Flexbox 布局的直系子元素时。
层级约束规则：
- 元素层级仅限在同一堆叠上下文中比较：同级元素 z-index 大者在前，同值时文档后出现者居上。
- 子元素不受跨上下文的层级影响（即仅同层级 siblings 比较 z-index）；层级高低取决于创建堆叠上下文的祖先值。
```
/* 示例: 父堆叠上下文制约子元素 */
.parent {
position: relative;
z-index: 1; /* 创建上下文; .child 层级受父级控制 */
}
.child {
z-index: 100; /* 在此堆叠上下文内有效, 不能超越外层元素 */
}
```