重叠不是 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 完全没反应。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须显式加 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" 时就注定了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！