z-index在css grid中无效是因为元素默认position: static，必须设position: relative激活层叠；重叠需先通过grid-column/grid-row实现物理占位，且父容器不能意外创建层叠上下文。
z-index 在 CSS Grid 中不是开箱即用的层级开关——它必须和 position: relative 配合才能生效，且重叠本身得靠 grid-column 和 grid-row 先“物理占位”实现。
为什么写了 z-index 却完全没反应？
最常见原因是目标元素的 position 仍是默认的 static。CSS 规范明确规定：z-index 对 static 元素无效，这不是 Grid 的限制，而是层叠规则本身的要求。
- 错误写法：
.card { z-index: 10; }（position没声明，就是static） - 正确写法：
.card { position: relative; z-index: 10; }（relative不破坏 Grid 布局，只激活层叠能力） - 别用
position: absolute单纯为了启用z-index——它会让元素脱离 Grid 轨道，无视grid-column和grid-row - 检查 DevTools 的 Computed 面板，确认
position值不是static，z-index值也不是auto
怎么让多个网格项真正落在同一区域？
重叠的前提是「物理位置交集」。仅靠 grid-area 名称相同不够，必须确保它们的行列范围实际重合。
- 安全写法：
grid-column: 2 / 4;（占第 2、3 列），grid-row: 1 / -1;（跨全部行） - 危险陷阱：
grid-column: 2 / 2;→ 区域宽度为 0，元素不可见 - 避免模糊写法：
grid-column: 2;等价于2 / 3，但容易误判跨度意图 - 命名区域要严格匹配：
grid-template-areas: "header header";才能让两个grid-area: "header"元素真正重叠；漏写占位符（如写成"header"）会导致回退到 auto-placement
父容器意外创建了层叠上下文怎么办？
即使每个子项都加了 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)替代filter: blur()；background: rgba(0,0,0,0.5)替代opacity: 0.5 - 注意：
perspective或transform-style: preserve-3d也会创建上下文，慎用于 Grid 容器本身
跨 Grid 容器时 z-index 为什么失效？
z-index 只在同一个 Grid 容器内有效。两个并列的 .grid-1 和 .grid-2，即使前者子项 z-index: 1000，后者子项 z-index: 1，最终谁在上取决于它们在 DOM 中的顺序，或各自容器的 z-index。
- 典型现象：卡片里的图标设了
z-index: 999，却盖不住隔壁容器里一个z-index: 1的按钮 - 解决思路：需要跨容器控制遮盖关系时，要么把它们放进同一个 Grid 容器，要么在外层加定位容器统一管理
z-index - 移动端特别注意：iOS 15.4 之前的 Safari 对 Grid 子项
z-index支持不完整，混用transform动画时可能出现闪烁或错乱——这是渲染引擎 bug，无法通过调整 CSS 规避
真正的难点不在“怎么写”，而在于分清三件事：用 grid-column/grid-row 决定“在哪叠”，用 position: relative 决定“能不能叠”，再用 z-index 决定“谁在上”。三者缺一不可，顺序也不能颠倒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
