z-index 无效是因为元素 position 为 static，需设 position: relative 激活；父容器创建层叠上下文会限制子项 z-index 作用范围；重叠需同一网格区域且正确设置 grid-column/grid-row。
直接写 z-index 没效果，是因为 Grid 子项默认是 position: static，而 z-index 对 static 元素完全无效——这不是 Grid 的限制，是 CSS 层叠规则本身的要求。
为什么加了 z-index 却没反应？
最常见原因是目标元素没设 position。哪怕只加 position: relative 就足够激活 z-index，且不会破坏 Grid 布局位置。
- 错误写法：
.item { z-index: 2; }（position未声明，默认static） - 正确写法：
.item { position: relative; z-index: 2; } - 别用
position: absolute单纯为了启用z-index——它会让元素脱离 Grid 轨道，无视grid-column和grid-row - 检查开发者工具的 Computed 面板，确认目标元素的
position值不是static
父容器意外创建层叠上下文怎么办？
即使每个子项都写了 position: relative 和 z-index，如果父容器（.grid-container）触发了新的层叠上下文，子项的 z-index 就只能在内部比大小，无法真正“盖过”兄弟项。
- 常见触发属性：
opacity: 0.99、transform: translateZ(0)、filter: blur(2px)、will-change: transform - 验证方法：在 DevTools 的 Computed 面板中搜索这些属性，临时禁用看
z-index是否恢复 - 替代方案：需要模糊背景时用
backdrop-filter: blur(4px)；需要半透明效果时改用background: rgba()替代opacity
grid-column / grid-row 怎么写才能真正重叠？
重叠的前提是多个元素占据同一网格区域。靠行列语法比靠 grid-template-areas 更可控、易调试。
立即学习“前端免费学习笔记（深入）”；
- 合法重叠写法：
grid-column: 2 / 3;（占第 2 列）、grid-column: 2 / -1;（从第 2 列延伸到末尾） - 危险写法：
grid-column: 2 / 2;→ 区域宽度为 0，元素不可见 - 避免只写起点：
grid-column: 2;等价于2 / 3，但容易误判实际跨度 - 命名区域重叠是规范行为，但层级仍由
position + z-index控制，和区域定义顺序无关
跨容器或移动端要注意什么？
z-index 只在同一个 Grid 容器内有效。不同容器之间的子项无法靠子项自身的 z-index 直接比较层级。
- 两个并列的
.grid-1和.grid-2，即使前者子项z-index: 100，后者子项z-index: 1，最终谁在上取决于它们在 DOM 中的顺序，或各自容器的z-index - iOS 15.4 之前的 Safari 对 Grid 子项上的
z-index支持不完整，尤其混用transform动画或will-change时可能出现闪烁或错乱——这是渲染引擎 bug，无法通过调整 CSS 规避 - Firefox 老版本在
z-index + transform同时存在时也有类似渲染抖动，可临时加will-change: transform缓解（仅在需动画时加）
最容易被忽略的是：你写的 z-index 数值再大，只要父容器建了新层叠上下文，它就出不去；而你没写的 position，哪怕只加一行 relative，就能让整个控制逻辑跑通。
