CSS Grid子元素意外重叠通常源于命名区域重复、行列范围冲突或z-index失效；需分步排查grid-area唯一性、grid-column/row定位及层叠上下文，并注意响应式断点下的定位同步。
CSS Grid 中子元素意外重叠，通常不是 Bug，而是布局逻辑被误用或层级控制缺失。关键要分两步排查：先确认是否“本意重叠”，再检查是否“该不重叠却重叠”。
检查 grid-area 是否重复分配
多个子元素若被赋予相同的命名区域（如都设 grid-area: banner），它们就会自然堆叠在同一网格单元内。
- 打开浏览器开发者工具，选中容器，查看 Layout 面板中的网格线和区域标注，确认是否有多个元素落在同一区域
- 检查 CSS 中是否对不同元素重复使用了同一个 grid-area 名称
- 若需避免重叠，确保每个元素的 grid-area 值唯一；或改用 grid-column / grid-row 显式指定不同位置
检查 grid-column 和 grid-row 是否冲突
即使没用命名区域，只要两个元素设置了完全相同的行列范围（例如都写 grid-column: 1 / 2; grid-row: 1 / 2;），也会重叠。
- 逐个审查子元素的 grid-column 和 grid-row 值，注意斜杠前后是网格线编号，不是行/列序号
- 特别留意 span 用法：比如 grid-row: 2 / span 3 表示从第2条线开始跨3条线（即占2、3、4三行），容易越界覆盖其他元素
- 临时加 outline: 1px solid #f00 到各子元素，直观观察实际占用范围
检查 z-index 是否生效且合理
重叠发生后，谁在上层由层叠上下文决定。z-index 只对定位元素有效，且需在同层叠上下文中比较。
立即学习“前端免费学习笔记（深入）”；
- 确认重叠元素是否设置了 position: relative（或其他非 static 值），否则 z-index 会被忽略
- 检查父容器是否意外创建了新的层叠上下文（例如设置了 opacity < 1、transform、filter 等），这会导致子元素的 z-index 只在该容器内生效
- 数值本身要区分层级：基础内容建议用 1–10，弹窗/导航可用 100+，避免随意用 9999
补充：响应式断点下易被忽略的重叠
媒体查询中修改了网格结构（如删掉一列、合并区域），但未同步更新子元素的 grid-area 或行列定位，就可能引发小屏下的意外重叠。
- 在关键断点（如 max-width: 768px）下，重新检查所有子元素的网格定位属性
- 优先让图文类组合改用 flex-direction: column 替代强行网格重叠，更可控
- 若确需小屏叠加（如卡片遮罩），明确设置 position: relative 在父容器，并用 absolute + z-index 精确控制子层
