grid子元素z-index不生效是因为默认position:static，而z-index仅对relative/absolute/fixed/sticky有效；需设position:relative激活层叠，再通过grid-column/grid-row使元素重叠于同一格，z-index仅微调已重叠元素的层级。
Grid 子元素的 z-index 不生效，不是代码写错了，而是它根本没被激活——因为默认 position: static，而 z-index 对 static 元素完全无效。
为什么 grid 子项加了 z-index 还是不叠上去
浏览器给每个 Grid 子项默认分配 position: static，这是 CSS 规范硬性要求：z-index 只对 relative、absolute、fixed 或 sticky 生效。DevTools 的 Computed 面板里一查，如果 position 还是 static，那 z-index 就等于没写。
- 最稳妥做法：统一加
position: relative，它不改变 Grid 布局位置，只激活层叠能力 - 别用
position: absolute单纯为了启用z-index——它会让元素脱离 Grid 轨道，grid-column和grid-row全部失效 - Grid 容器本身不创建层叠上下文，所以不用给它设
position或z-index
怎么让多个子元素真正重叠起来
重叠不是靠 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，但它盖不住另一个独立display: grid的弹窗 - 检查父级是否意外触发新层叠上下文：比如
opacity: 0.99、transform、filter、will-change - 验证方法：DevTools 的 Layers 面板看是否有额外 “Stacking Context” 节点
- 要跨容器控制遮挡关系，得提升共同祖先的
z-index，而不是堆高子项数值
移动端和旧版 Safari 的兼容性坑
iOS 15.4 之前的 Safari 对 Grid 子项上的 z-index 支持不完整，尤其混用 transform 动画或 will-change 时，可能出现层级错乱或闪烁。
- 这不是代码问题，而是渲染引擎 bug，无法通过调整 CSS 规避
- 降级策略：对关键重叠区域（如悬浮卡片），不塞进 Grid 内部，改用
position: fixed或外层包裹position: relative+absolute精确控层 - 响应式断点下容易失控：媒体查询改了网格结构（比如删列、合并区域），但子元素的
grid-column、grid-row没同步更新，小屏下就会出现意料外重叠
真正要控制的，从来不是“怎么让它叠上去”，而是“谁该在哪个位置、以什么层级被看见”——grid-column 定义空间归属，position 激活层叠能力，z-index 提供精细调节，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
