z-index在grid子项上无效是因为元素默认position: static，而z-index仅对relative/absolute/fixed/sticky定位元素生效；必须显式设置position（如relative）才能参与层叠排序，且需确保父容器未意外创建层叠上下文。
z-index 在 Grid 子元素上直接写就无效，必须配合 position: relative 才能参与层叠排序。
为什么 z-index 写了但不生效
常见错误是给 Grid 子项直接加 z-index: 10，却忘了它默认是 position: static。CSS 规范明确规定：z-index 只对定位元素（relative、absolute、fixed 或 sticky）起作用。
- 检查 DevTools 的 Computed 面板，确认目标元素的
position值不是static - 不要给 Grid 容器设
position或z-index——它不创建层叠上下文，也不需要 - 避免用
position: absolute单纯为了启用z-index，否则该元素会脱离 Grid 轨道，忽略grid-column等设置
grid-column / grid-row 是重叠的前提，不是排序依据
多个子元素要视觉重叠，本质是让它们占据同一网格区域。这靠 grid-column 和 grid-row 控制“在哪叠”，而非“谁在上”。
- 合法写法：
grid-column: 2 / 3（占第 2 列格子）、grid-column: 2 / -1（从第 2 列延伸到末尾） - 危险写法：
grid-column: 2 / 2→ 区域宽度为 0，元素不可见 -
grid-area: "header"也等效：只要多个元素共用同一个命名区域，就会重叠 - 重叠后，DOM 顺序决定默认堆叠次序（后写的在上），
z-index仅在同一定位状态下起微调作用
z-index + DOM 顺序共同决定最终层叠结果
当两个元素都满足「同一网格区域 + position: relative」时，z-index 才真正介入排序。但它的优先级低于 DOM 顺序 —— 换句话说，即使 A 的 z-index 更高，只要 B 在 HTML 中写在 A 后面且未设 z-index，B 仍可能盖住 A。
- 显式控制推荐写法：
<div style="grid-column:1/2; grid-row:1/2; position:relative; z-index:2">底层</div><div style="grid-column:1/2; grid-row:1/2; position:relative; z-index:1">顶层</div> - 若不想依赖 DOM 顺序，可统一设
z-index，并确保数值严格递增/递减 - 注意父容器是否意外创建了 stacking context（比如加了
opacity: 0.99或transform），这会让子元素的z-index被截断在局部范围内
最易被忽略的一点：Grid 中的重叠不是 bug，而是机制使然；你真正要控制的，从来不是“怎么让它叠上去”，而是“谁该在哪个位置、以什么层级被看见”。grid-column 定义空间归属，position 激活层叠能力，z-index 提供精细调节——三者缺一不可，顺序也不能颠倒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
