Grid子项z-index无效的根本原因是position为static，需设position:relative激活层叠；重叠需正确设置grid-column/row（起止线不能重合）；父容器创建层叠上下文（如opacity<1、transform等）会限制z-index作用范围。
z-index 在 Grid 子项上写了却没效果，基本可以断定：不是数值不够大，而是元素压根没进入层叠计算流程。
为什么加了 z-index 还是 static？
Grid 子项默认 position: static，而 z-index 对 static 元素完全无效——浏览器连解析都跳过，DevTools 里该属性直接置灰。这不是 Grid 特性，是 CSS 层叠规则本身的要求。
- 用 Chrome DevTools 选中目标元素，在 «Computed» 面板搜
position，确认最终值不是static - 最稳妥的补救方式是加
position: relative：它不脱离 Grid 轨道，不影响grid-column/grid-row对齐，只激活层叠能力 - 别用
position: absolute单纯为了启用z-index——它会让元素脱离 Grid 布局，grid-column等声明彻底失效
重叠区域写对了吗？grid-column: 2 / 2 是个陷阱
视觉重叠必须由多个子项主动占据同一网格区域实现，z-index 只决定“谁在上”，不决定“是否重叠”。写错行列语法，元素可能不可见或错位。
- 合法写法：
grid-column: 2 / 3（占第 2 列）、grid-column: 2 / -1（从第 2 列延伸到末尾） - 危险写法：
grid-column: 2 / 2→ 区域宽度为 0，元素消失；grid-column: 2虽等价于2 / 3，但容易误判实际跨度 -
grid-row同理，起止线不能重合，且必须落在容器定义的轨道范围内
父容器悄悄创建了层叠上下文？
即使 position 和 grid-column 都写对了，z-index 仍可能被锁死在局部范围。只要某个祖先元素满足以下任一条件，它就创建了独立的 stacking context，子项的 z-index 只能在里面比大小。
立即学习“前端免费学习笔记（深入）”；
- 常见触发属性：
opacity: 0.99、transform: translateZ(0)、filter: blur(2px)、will-change: transform - 验证方法：在 DevTools 的 Elements 面板逐级点击父节点，右侧面板 «Layout» 标签页看 «Stacking context» 是否突然变成 Yes
- 临时注释掉可疑父级的
transform或opacity，遮挡消失就坐实问题 - 替代方案：需要模糊背景时用
backdrop-filter: blur(4px)替代filter；需要半透明又不想触发上下文，改用background: rgba()而非opacity
iOS Safari 15.4 之前有渲染引擎 bug
旧版 Safari 对 Grid 子项上的 z-index 支持不完整，尤其混用 transform 动画或 will-change 时，可能出现层级错乱或闪烁。这不是代码问题，无法通过调整 CSS 规避。
- 降级策略：对关键重叠区域（如弹窗、悬浮菜单），避免在 iOS 15.4 之前 Safari 中依赖子项
z-index控制层级 - 更可靠的做法是控制外层容器的
z-index，而非堆高子项数值 - 移动端调试时，优先排查
translateZ(0)类加速写法——Safari 比 Chrome 更敏感
真正难处理的不是怎么写 z-index，而是判断当前元素到底属于哪个层叠上下文——尤其当祖先节点用了 filter、will-change 或半透明背景时，z-index 就不再是“写大一点就行”的问题了。
