z-index在grid中失效是因为子元素未创建层叠上下文，必须为定位元素（如position: relative）；视觉重叠需通过grid-column/row让多元素占据同一网格区域，堆叠顺序由dom顺序和z-index共同决定。
z-index 在 Grid 容器内为什么经常失效
直接给子元素设 z-index 却没效果？大概率是因为这些元素没有「层叠上下文」。Grid 容器本身不自动创建层叠上下文，z-index 只对「定位元素」（position 为 relative、absolute、fixed 或 sticky）生效。
常见错误现象：z-index: 10 写了但视觉顺序没变，检查发现元素仍是 position: static（默认值）。
- 必须显式加
position: relative（最常用，不影响布局） - 避免用
position: absolute除非你真要脱离 Grid 轨道——它会忽略grid-column/grid-row - Grid 父容器不需要
position，也不需要z-index，它只负责轨道划分
grid-column 重叠的两种合法写法
Grid 中实现视觉重叠，本质是让多个元素占据同一网格区域。关键不是“强行盖上去”，而是“主动填进同一个格子”。
正确写法只有两种：
-
grid-column: 2 / 3;—— 占第 2 列到第 3 列之间的轨道（即第 2 列格子） -
grid-column: 2 / -1;—— 从第 2 列开始，一直延伸到最后一根线（常用于跨列覆盖）
错误写法：grid-column: 2; 是简写，等价于 grid-column-start: 2; grid-column-end: 3;，没问题；但 grid-column: 2 / 2 会导致区域宽度为 0，元素不可见。
z-index + grid-column 组合控制堆叠顺序的实际顺序
当多个元素共享同一 grid-column 和 grid-row 区域时，最终视觉层叠顺序由三者共同决定，优先级从高到低：
- DOM 顺序（后写的元素默认在前一个上面）
- 同 DOM 顺序下，
z-index值大的在上（前提是都已定位） -
grid-column本身不参与排序，它只决定“在哪重叠”，不决定“谁在上”
示例：两个 div 都设 grid-column: 1 / 2; grid-row: 1 / 2;，且都加 position: relative：
<div style="grid-column: 1/2; grid-row: 1/2; position: relative; z-index: 5">A</div> <div style="grid-column: 1/2; grid-row: 1/2; position: relative; z-index: 10">B</div>
B 会在 A 上面——因为 z-index: 10 > 5，且 DOM 中 B 在 A 后。
移动端或 Flex/Grid 混用时容易被忽略的陷阱
在响应式场景中，如果用 @media 动态切换 display: grid ↔ flex，z-index 行为可能突变：
- Flex 容器中，
z-index同样只对定位元素有效，但 flex 项的默认排列顺序（order）也会影响层叠，和 grid 的 DOM 顺序逻辑不同 - 某些旧版 Safari（≤15.4）对
z-index在 grid 子项中的解析有 bug，建议加transform: translateZ(0)强制触发硬件加速（副作用小，兼容性好） - 如果重叠区域涉及
overflow: hidden的父容器，记得检查是否裁剪了本该显示的上层元素
真正难的不是写对语法，而是意识到：重叠是「区域共享 + 层叠控制」两步动作，少一步就只剩错觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
