问题引入：z-index失效的常见场景
"我明明给弹窗设了z-index:9999，怎么还是被导航栏盖住？"这种抓狂场景的根源往往藏着CSS层叠上下文的隐形陷阱。超过60%的前端开发者曾因z-index问题浪费8小时以上调试时间，而position:static正是最容易踩中的雷区[2]。
图1：z-index失效场景对比示意图
MDN规范明确指出：z-index仅对定位元素（position为relative/absolute/fixed/sticky）生效。当元素处于默认static状态时，无论设置多高的z-index值都形同虚设，此时元素层级由HTML文档流顺序决定[1]。
position属性与z-index的生死绑定
static定位的致命缺陷
每个CSS元素默认都是position:static，就像没有参赛资格的选手——即使设置z-index:9999，也无法参与层级竞争。直观案例：两个重叠div，红色div设置position:static; z-index:999，蓝色div设置position:relative; z-index:1，最终蓝色div会覆盖红色div，因为static元素根本不参与z-index比较[1]。
z-index生效条件 | 具体定位值 |
有效 | relative/absolute/fixed/sticky |
无效 | static（默认值） |
其他定位值的层级特性
- relative：相对自身位置偏移，可创建堆叠上下文
- fixed：相对于视窗定位，默认层级高于relative
- sticky：滚动时动态固定，需注意父容器限制
图3：position不同值的堆叠层级示意图
堆叠上下文：隐形的层级结界
什么是堆叠上下文？
堆叠上下文就像独立的"玻璃房"，内部元素的z-index仅在房内有效。创建上下文的常见条件：
- 定位元素且z-index非auto
- opacity < 1或transform非none
- flex/grid子元素且z-index非auto
图4：堆叠上下文层级关系示意图
核心规则：子元素无法突破父结界
父元素创建堆叠上下文后，子元素的z-index再高也无法超越父级。例如：
<div style="z-index:1; position:relative;">
<div style="z-index:999;">子元素</div>
</div>
<div style="z-index:2; position:relative;">兄弟元素</div>
子元素会被兄弟元素遮挡，因为它受限于z-index:1的父上下文。
实战案例：从知名bug看本质
Ant Design组件库的层级冲突
问题：用户点击按钮触发Modal时，Tooltip提示框被遮罩层遮挡
原因：Modal容器因transform属性创建独立上下文
解决方案：采用Arco Design的动态层级方案，按组件类型划分区间：
$z-layers: (
modal: 1000,
tooltip: 200,
dropdown: 150
);
图6：Ant Design案例修复前后对比图
Firefox扩展的极端值滥用
某邮件扩展设置z-index:999999999，导致输入框遮挡验证码。修复方案：
- 移除极端值，采用100-200合理区间
- 参考1Password设计：聚焦时显示图标，滚动时隐藏
避坑指南：3个实战技巧
1. 模块化层级管理
const zIndexManager = {
current: 1000,
getNext() { return this.current++ }
};
// 使用：element.style.zIndex = zIndexManager.getNext();
2. iOS Safari兼容性
.fix-ios-zindex {
transform: translateZ(1px);
}
3. 调试三板斧
- 检查元素position是否为static
- Chrome Layers面板查看上下文边界
- 确认父元素z-index是否足够高
记住：好的z-index管理不是比大小，而是建立可预测的层级规则。合理使用定位属性，避开static陷阱，才能让你的界面层级井然有序。