重叠不是 bug 而是 Grid 规范行为：多个元素 grid-area 值匹配同一命名区域时必然重叠，无自动错开；z-index 需配合 position: relative 才生效；响应式下需同步更新 grid-template-areas 与 grid-area。
重叠不是 grid-area 的 bug，而是它按规范工作的必然结果：只要多个元素的 grid-area 值匹配同一个命名区域，它们就会被放进同一网格单元——没有自动错开机制。
grid-area 值重复就必然重叠
比如父容器写了 grid-template-areas: "header nav main"，而两个元素都设了 grid-area: "header"，那它们就都会被塞进第一格。后出现在 HTML 中的那个，自然盖在前面那个上面。
- 这不是样式没生效，是 Grid 明确允许区域复用，只是不帮你“排队”
- 拼写差一个空格、大小写不一致（
"Header"≠"header"）、引号类型混用（单引号 vs 双引号），都会导致匹配失败，反而让元素掉进 auto-placement 区域，更难排查 - 用 DevTools 的 Elements 面板直接看每个元素的
computed grid-area，比翻源码快得多——如果显示为auto或空值，说明根本没匹配上
z-index 在 grid-area 上默认无效
z-index 不是开关，它只对定位元素起作用。Grid 子项默认是 position: static，此时写 z-index: 999 完全没反应。
- 必须显式加
position: relative（最安全，不影响布局流）才能激活z-index - 错误写法：
.overlay { z-index: 10; }→ 无效 - 正确写法：
.overlay { position: relative; z-index: 10; }→ 立刻参与层叠 - 父容器不需要
position: relative来“开启”子项的z-index，子项自己定位就行
响应式切换后突然重叠，大概率是 grid-template-areas 没同步更新
媒体查询里改了 grid-template-areas，但忘了改对应子元素的 grid-area，或者新旧定义顺序写反了，CSS 层叠规则会让旧定义继续生效。
立即学习“前端免费学习笔记（深入）”；
- 确保媒体查询中的
grid-template-areas写在常规样式之后 - 桌面端用
"header nav main aside"，移动端改成两行，那nav和aside的grid-area很可能需要重设，否则会挤进同一行 - 用
@supports (display: grid)包一层更稳妥，避免不支持 Grid 的环境里残留样式干扰调试
真正麻烦的不是重叠本身，而是你以为它“不该发生”，结果花半天查 display: grid 是否漏写、查浏览器兼容性，却没意识到——重叠早就在你写第二遍 grid-area: "cover" 时就注定了。
