z-index 在 Grid 子项上默认无效，必须配合 position: relative 才能生效；重叠是 Grid 正常行为，需显式激活层叠能力——即先设 position（非 static），再用 z-index 排序，且注意父容器是否创建了隔离的层叠上下文。
z-index 在 Grid 子项上默认无效，必须配合 position: relative 才能生效；重叠本身是 Grid 的正常行为，不是 bug，关键在于你是否显式激活了层叠能力。
为什么写了 z-index 却没反应？
浏览器直接忽略 z-index，因为 Grid 子项默认是 position: static。CSS 规范明确规定：只有定位元素（relative、absolute、fixed、sticky）才参与层叠排序。
- 错误写法：
.card { z-index: 10; }→ 完全不生效 - 正确写法：
.card { position: relative; z-index: 10; }→ 立刻参与排序 - 用 DevTools 的 Computed 面板检查目标元素的
position值，确认不是static - 别给 Grid 容器加
position: relative来“撑开”子项的z-index——它不需要，也不起作用
grid-area 相同就必然重叠，但谁在上由 DOM 顺序决定
多个元素写 grid-area: "hero"，而 grid-template-areas 中 "hero" 只占一个格子，它们就会物理重叠。此时浏览器按 HTML 顺序渲染：后写的元素自然盖在前面的上面。
- 这不是样式失效，是 Grid 的设计机制
- 拼写必须完全一致：大小写、引号类型（单/双）、空格数、
.占位符都不能差 - 快速验证方法：临时给每个
grid-area加唯一后缀，比如"hero-1"和"hero-2"，看是否还叠 - 用 DevTools Elements 面板直接看每个元素的 computed
grid-area值，比翻源码快得多；显示为auto或空值，说明命名没匹配上
用 grid-row/grid-column 替代 grid-area 更可控
比起依赖命名区域，直接用行列线控制范围更灵活，也更容易调试重叠边界。尤其当你只需要局部覆盖（比如卡片右下角浮一层按钮），而不是整个区域堆叠时。
- 合法写法：
grid-column: 2 / 3（占第 2 列）、grid-column: 2 / -1（从第 2 列延伸到末尾） - 危险写法：
grid-column: 2 / 2→ 区域宽度为 0，元素不可见 - 避免只写起点：
grid-column: 2等价于2 / 3，容易误判实际跨度 - 重叠后，
z-index只在所有元素都满足「同一网格区域 +position: relative」时才真正介入排序
父容器意外创建层叠上下文会截断 z-index
如果 Grid 容器或某级父元素设置了 opacity: 0.99、transform: translateZ(0)、isolation: isolate 或 filter，就会创建新的层叠上下文，导致子元素的 z-index 被限制在该上下文内，无法和外部元素比较。
- 检查父级是否有这些属性，尤其是 React/Vue 动态插入时容易带入隐式样式
- 不要靠
position: absolute单纯启用z-index——它会让元素脱离 Grid 轨道，忽略grid-column等设置 - 若要用
absolute覆盖，记得加inset: 0或手动设宽高，否则可能尺寸异常 - 最易被忽略的一点：Grid 中的重叠不是要“修”的问题，而是你要主动设计的视觉层次——
grid-column定义空间归属，position激活层叠能力，z-index提供精细调节，三者缺一不可，顺序也不能颠倒
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
