Grid 中元素叠加是主动设计而非 bug，关键在于控制层叠顺序；需用 position:relative 启用 z-index，通过 grid-row/column 精确控制位置，并在响应式中同步更新 grid-template-areas 与 grid-area。
Grid 里做叠加不是“修 bug”，而是主动设计层叠关系；关键不在避免重叠，而在控制谁盖谁、怎么盖、盖得稳不稳。
grid-area 值重复导致重叠，怎么快速定位
多个元素写 grid-area: "header"，而 grid-template-areas 中 "header" 只占一个格子，它们就会叠在一起——这不是错误，是 Grid 的默认行为。后出现在 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 更可控
比起依赖命名区域，直接用行列线控制范围更灵活，也更容易调试重叠边界。
立即学习“前端免费学习笔记（深入）”；
- 避免只写起点，比如
grid-column: 2等价于2 / 3，容易误判跨度 - 负值可用，但要小心：
grid-column: -2 / -1表示倒数第二列到倒数第一列 - 用
span更语义化：grid-column: 2 / span 2比2 / 4更易维护 - 调试时打开 Chrome DevTools → Layout 面板 → 勾选 “Show line numbers”，一眼看出实际占位；注意
gap不产生线号，别误把gap当作轨道边界
响应式切换后突然重叠，重点查三处
媒体查询里改 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、z-index、position 和隐式轨道行为，缺一不可。
