重叠是 grid 默认行为而非 bug；快速定位需用 devtools 查 computed grid-area，检查拼写一致性（引号、大小写、空格），临时加唯一后缀测试，并确保 z-index 配合 position: relative 才生效。
重叠不是 bug，是 Grid 的默认行为；关键在你是否意识到它会发生，以及是否主动控制了区域分配和层叠顺序。
grid-area 值重复导致重叠，怎么快速定位
多个元素写 grid-area: "header"，而 grid-template-areas 中 "header" 只占一个格子，它们就会叠在一起。后出现在 HTML 中的元素自然盖在前面的上面。
- 用 DevTools 的 Elements 面板直接看每个元素的
computed grid-area，比查源码更快——如果显示为auto或空值，说明命名没匹配上 - 检查拼写：大小写、引号（必须是双引号或单引号包裹字符串）、空格数、
.占位符是否一致 - 临时加唯一后缀测试，比如把
grid-area: "sidebar"改成grid-area: "sidebar-1"和grid-area: "sidebar-2"，看是否还叠
z-index 不生效？先确认定位状态
z-index 在 Grid 子项上默认无效，因为它们是 position: static。这不是 Grid 的限制，是 CSS 层叠规则本身的要求。
- 错误写法：
.item { z-index: 10; }→ 完全没反应 - 正确写法：
.item { position: relative; z-index: 10; }→ 立刻参与层叠排序 - 父容器不需要
position: relative来“开启”子项的z-index，只要子项自己定位就行 - 如果用了
position: absolute，注意它会脱离网格轨道尺寸，需手动设宽高或用inset: 0填满父格
用 grid-row / grid-column 替代 grid-area 更可控
比起依赖命名区域，直接用行列线控制范围更灵活，也更容易调试重叠边界。
-
grid-area: "header"是语义绑定，但容易因grid-template-areas拼错而失效；grid-row: 1 / 3; grid-column: 1 / 4;是精确锚定，不依赖字符串匹配 - 调试时打开 Chrome DevTools → Layout 面板 → 勾选 “Show line numbers”，一眼看出实际占位
- 负值可用：
grid-column: -2 / -1表示倒数第二列线到最后一列线，适合右侧动态宽度场景 - gap 不产生线号，别误把 gap 当作轨道边界；线号只属于 track 之间的分界
响应式切换后突然重叠，重点查三处
媒体查询里改 grid-template-areas 时，如果新定义没覆盖旧定义，或者顺序写反了，旧区域名还在生效，新旧 grid-area 映射冲突，视觉上就出现重叠。
- 确保媒体查询中的
grid-template-areas定义在常规样式之后，CSS 层叠规则下后者才生效 - 不要只改
grid-template-areas，而忘了同步调整子元素的grid-area—— 比如桌面端用"header nav main aside"，移动端改成两行，nav和aside若仍保持原grid-area值，很可能挤进同一行 - 用
@supports (display: grid)包一层更稳妥，避免在不支持 Grid 的环境里样式残留干扰调试
真正难处理的不是重叠本身，而是你以为它“该不重叠却重叠了”——这时候往往不是样式写错了，而是 grid-template-areas 字符串每行单词数不等、某处混入了全角空格、或者某个元素被 display: contents 剥离出了网格上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
