重叠不是 bug，是 grid 的默认行为；多个元素使用相同 grid-area 值（如 "header"）会落入同一网格区域而重叠，后出现的 html 元素自然覆盖前者，需通过 devtools 查 computed grid-area、检查拼写一致性、加唯一后缀测试，并为 z-index 配合 position: relative 才生效，或改用 grid-row/grid-column 精准控制行列范围。
重叠不是 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 在 Grid 子项上不生效？先确认定位状态
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 更可控
比起依赖命名区域，直接用行列线控制范围更灵活，也更容易调试重叠边界。
- 调试时打开 Chrome DevTools → Layout 面板 → 勾选 “Show line numbers”，一眼看出实际占位
-
grid-column: -2 / -1表示倒数第二列线到最后一列线，适合右侧动态宽度场景 -
gap不产生线号，别误把gap当作轨道边界；线号只属于 track 之间的分界 - 避免只写起点，比如
grid-column: 2等价于2 / 3，容易误判跨度；推荐用grid-column: 2 / span 2更语义化
响应式切换后突然重叠，重点查三处
媒体查询里改 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-row 指向未定义的行线（如 grid-row: 5 但只定义了 3 行），浏览器会创建隐式轨道，默认高度为 auto，可能塌陷或撑开，造成项看似重叠实则错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
