grid-area值重复导致重叠是grid的默认行为，多个元素写相同grid-area如"header"且模板中仅占一格时会叠在一起，dom顺序决定层叠次序；需用devtools查computed值、校验拼写、加position:relative启用z-index，或改用grid-row/column精确控制。
grid-area 值重复导致视觉重叠
多个元素写相同的 grid-area: "header"，而 grid-template-areas 里 "header" 只占一个格子，它们就会叠在一起——这不是 bug，是 Grid 的明确行为：同名区域允许多个项进入，DOM 顺序决定谁在上。
- 用 DevTools Elements 面板直接看每个元素的
computed grid-area，比查源码更快；显示为auto或空值，说明命名没匹配上 - 检查拼写：大小写、引号（必须是双引号或单引号包裹）、空格数、
.占位符是否一致 - 临时加唯一后缀测试，比如把
grid-area: "sidebar"改成grid-area: "sidebar-1"和grid-area: "sidebar-2"，看是否还叠
grid-row / grid-column 起止线没配对
只写 grid-column: 2 等价于 2 / 3，跨度为 1；两个项都这么写，必然落在同一列轨道内，视觉重叠。
- 显式写全起止线，如
grid-column: 2 / 4，避免依赖默认行为 - 用
span更语义化：grid-column: 2 / span 2比2 / 4更易维护 - 负值可用但需谨慎：
grid-column: -2 / -1表示倒数第二列到最后一列，别误判实际占位 - 打开 Chrome DevTools Layout 面板 → 勾选 “Show line numbers”，一眼看出每条线位置；注意
gap不产生线号
内容撑破轨道引发“假重叠”
网格轨道设得太死（比如 grid-template-rows: 60px 60px），但某项内有长文本或图片，内容高度突破限制，就会“顶穿”下一行，看起来像和下面的项重叠。
- 优先用
minmax(min-content, 1fr)或minmax(0, 1fr)替代固定像素值 - 对不确定高度的项，加
overflow: hidden+text-overflow: ellipsis控制文字 - 禁用
white-space: nowrap（除非真需要单行），它会让文本拒绝换行，强行撑高 - 检查是否启用了
grid-auto-flow: dense：它会把小项目塞进前面空隙，可能让两个本不该同格的项挤一起
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填满父格
computed grid-area 和 grid-row/grid-column 的最终值，再确认内容有没有悄悄撑破边界。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
