z-index在grid子项上无效是因为元素默认position: static，必须设置position: relative等定位属性才能激活层叠上下文；grid容器不创建层叠上下文，但子容器会，跨容器重叠需提升共同祖先的z-index。
Grid 里写 z-index 没反应？不是 bug，是没激活定位上下文——必须加 position: relative 才生效。
为什么 z-index 在 Grid 子项上直接写无效
浏览器默认给 Grid 子项分配 position: static，而 CSS 规范明确规定：z-index 只对 relative、absolute、fixed 或 sticky 元素起作用。DevTools 的 Computed 面板里一查，如果 position 还是 static，那 z-index 就等于没写。
- 别只写
z-index: 10，得配position: relative（最安全，不脱离文档流） - 避免用
position: absolute单纯为了启用z-index——它会让元素脱离 Grid 轨道，grid-column和grid-row失效 - Grid 容器本身不创建层叠上下文，所以不用给它设
z-index或position
重叠的前提：先让元素“占同一格”
视觉重叠不是靠 z-index 拉出来的，而是靠网格定位把多个元素塞进同一个区域。DOM 顺序决定默认谁盖谁，z-index 只在“已重叠”的前提下微调顺序。
- 合法写法：
grid-column: 2 / 3; grid-row: 1 / 2（占第 2 列第 1 行） - 危险写法：
grid-column: 2 / 2（宽度为 0，元素不可见） - 用命名区域时，确保多个元素共用同一
grid-area，比如都设grid-area: "hero" - 调试技巧：DevTools 勾选 “Show grid areas” 和 “Show line numbers”，一眼看清实际占位
跨容器重叠时 z-index 为啥不顶用
Grid 容器会自动创建新的层叠上下文（stacking context），子项的 z-index 只在该容器内有效，无法穿透到兄弟容器或父级布局中。
- 常见陷阱：给卡片里的图标设
z-index: 999，但弹窗在另一个 Grid 容器里——图标永远盖不过弹窗 - 父容器若带
opacity: 0.99、transform、filter或will-change，也会意外创建层叠上下文，截断子项层级 - 要跨容器控制遮挡关系，得提升共同祖先的
z-index，而不是堆高子项数值 - 检查方法：用 DevTools 的 Layers 面板看是否有额外 “Stacking Context” 节点
响应式断点下重叠容易失控
媒体查询改了网格结构（比如删列、合并区域），但子元素的 grid-area 或行列值没同步更新，小屏下就会出现意料外重叠。
- 关键断点（如
max-width: 768px）下，重新检查所有子元素的grid-column、grid-row或grid-area - 小屏优先考虑用
flex-direction: column替代强行网格重叠，更可控 - 若确需叠加（如卡片遮罩），建议在父容器设
position: relative，再用absolute+z-index精确控层，避开 Grid 定位干扰
真正难的不是让元素叠上去，而是搞清谁该在哪一层——grid-column 定空间归属，position 激活层叠能力，z-index 提供精细调节。三者漏一环，就只剩 DOM 顺序在硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
