grid-area值重复直接导致多个元素堆叠在同一网格单元，dom顺序决定谁在上；computed值为auto说明命名未匹配，z-index需配合position: relative才生效。
grid-area 值重复直接导致堆叠
多个元素写相同的 grid-area: "header"，而 grid-template-areas 中 "header" 只占一个格子，它们就会落在同一网格单元里——这不是 bug，是 Grid 的明确行为。后出现在 HTML 中的元素自然盖在前面的上面，DOM 顺序决定视觉层叠次序。
常见错误现象：
- 明明写了不同区域名，但 DevTools 里看到 computed
grid-area是auto或空值 → 实际没匹配上任何命名区域 - 复制粘贴
grid-template-areas字符串时混入全角空格或中文引号 → 名字不一致，回退到 auto-placement，所有元素挤在左上角 - 某行少写一个
.占位符，比如三列布局中写了"nav main"而不是"nav main ."→ 整行列数错位，后续区域偏移重叠
z-index 在 grid 子项上默认不生效
z-index 对 position: static（默认值）完全无效。你写了 .card { z-index: 10; }，它不会改变层叠顺序。
必须显式加定位才能启用 z-index：
-
.card { position: relative; z-index: 10; }→ 安全、不影响布局流 -
.overlay { position: absolute; inset: 0; z-index: 20; }→ 注意：脱离网格轨道尺寸，需手动控制宽高或用inset: 0 - 父容器设了
transform或opacity: 0.99→ 会创建新层叠上下文，子项z-index只在该容器内比较
用 grid-row / grid-column 替代 grid-area 更易控重叠边界
依赖命名区域容易掩盖冲突；直接用行列线能一眼看出交集范围。只要两个元素的行列范围有重合，就构成重叠。
示例对比：
- 危险写法：
grid-column: 2;→ 等价于2 / 3，跨度易误判 - 安全写法：
grid-column: 2 / 4;→ 明确占第 2、3 列；grid-row: -2 / -1;→ 倒数第二行到最后一行 - 零宽陷阱：
grid-column: 2 / 2;→ 宽度为 0，元素不可见
调试时打开 Chrome DevTools → Layout 面板 → 勾选 “Show line numbers”，网格线编号一目了然；注意 gap 不产生线号，别把它当轨道边界。
响应式切换后突然重叠，重点查三处
媒体查询里改 grid-template-areas，但旧定义没被覆盖，新旧映射冲突，视觉上就重叠。
必须确认：
- 媒体查询中的
grid-template-areas是否写在常规样式之后（CSS 层叠规则下后者才生效） - 是否只改了父容器区域定义，却忘了同步调整子元素的
grid-area值（比如桌面端四列，移动端改成两行，但nav和aside还保持原grid-area） - 是否用了
@supports (display: grid)包裹整套 Grid 样式 → 避免不支持环境里残留样式干扰调试
真正难排查的，往往不是命名拼错，而是媒体查询里区域结构变了，但子元素还按老规矩落位——这种错位在小屏下才暴露，且 DevTools 里看不出明显报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
