重叠存在但看不见，主因是overflow裁剪、隐式轨道塌陷或z-index失效；需检查overflow/clip-path、隐式轨道高度、grid-auto-flow: dense、position缺失及层叠上下文锁定，并验证grid-area拼写与计算值。
重叠存在但看不见？先查 overflow 和隐式轨道
重叠本身不会让元素消失，但overflow: hidden、clip-path或隐式轨道塌陷会让它“看起来没叠上去”。常见现象是：两个元素明明落在同一区域，却只显示一个，或内容被截断一半。
检查点如下：
- 父容器是否设置了
overflow: hidden、overflow: clip或clip-path——它们会直接裁掉重叠部分，而非阻止重叠发生 - 用 DevTools 的 Layout 面板看是否有“implicit grid track”（隐式轨道），尤其当某项内容高度远超
grid-template-rows设定值时，隐式行可能为auto却未撑开，导致后一项“掉进空隙”，视觉上像被前一项盖住 - 检查是否启用了
grid-auto-flow: dense：它会让小项目主动填前面的空格，可能把本该错开的两项硬塞进同一格，且不报错、不警告
z-index 写了但没反应？90% 是 position 缺失或层叠上下文锁死
z-index在 Grid 子项上默认无效，不是 bug，是 CSS 层叠规则本身的要求：它只对position值为relative、absolute、fixed或sticky的元素生效。Grid 子项默认是position: static，此时z-index被完全忽略。
排查步骤：
- 确认子项是否写了
position: relative（推荐）或其它非static值；仅写z-index: 10毫无作用 - 检查父 Grid 容器是否意外创建了新层叠上下文：如
opacity: 0.99、transform: translateZ(0)、filter: blur(1px)、will-change: transform——这些都会把子项的z-index锁死在内部，无法穿透到兄弟容器 - 在 DevTools 的 Computed 面板搜索
stacking context，或临时移除可疑样式验证效果是否恢复
DevTools 显示“重叠了”，但页面没变化？重点核对 grid-area 拼写与计算值
多个元素写相同grid-area: "header"，但实际没重叠，往往是因为名字根本没匹配上。浏览器会静默回退到 auto-placement，所有项挤在左上角——你看到的“并排”，其实是它们都失败后堆在一起的结果。
快速验证方法：
- 在 Elements 面板选中目标元素，直接看右侧 Computed 标签页里的
grid-area值：如果是auto或空，说明命名失败 - 检查拼写：大小写、引号（必须是英文双引号或单引号）、全角/半角空格、复制粘贴带入的中文引号或零宽字符
- 确认
grid-template-areas每行单词数一致，缺位必须用.占位，不能留空格；例如三列布局，"nav main ."合法，"nav main"会导致第二列塌缩
响应式切换后突然重叠？媒体查询里 grid-area 没同步更新
桌面端正常，移动端一缩就重叠，大概率是媒体查询中只改了grid-template-areas，却忘了同步调整子元素的grid-area值。比如桌面用"header nav main aside"，移动端改成两行"header header" "main main"，但nav和aside仍保留原grid-area: "nav"，结果它们被丢进 auto-placement 区域，可能重叠在main上。
安全做法：
- 媒体查询内，
grid-template-areas定义必须放在子元素grid-area规则之后，确保层叠顺序正确 - 避免跨断点复用同一
grid-area名；更可控的是统一用行列语法：grid-row: 2 / 4; grid-column: 1 / -1;，不依赖命名线 - 用
@supports (display: grid)包裹整套 Grid 规则，防止不支持环境残留干扰
grid-row/grid-column交集和z-index控制，后者往往藏在computed grid-area为auto、隐式轨道高度为0、或父容器悄悄创建了层叠上下文这些细节里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
