grid-area 值相同时元素会重叠，重叠顺序由 DOM 顺序决定，可用 z-index 控制（需定位）；也可用 grid-row/grid-column 指定行列线实现灵活重叠；重叠不导致裁剪，需检查 overflow 和 place-items；调试建议用 outline、背景色及开发者工具网格可视化功能。
grid-area 值相同就会重叠
当多个网格项的 grid-area 属性值完全一致（比如都设为 "header"），它们会占据同一个网格区域，自然发生视觉重叠。这是 CSS Grid 的标准行为，不是 bug。
- 重叠顺序由 DOM 中的元素顺序决定：后出现的元素在上层
- 可通过
z-index显式控制层级，但仅对定位上下文中的网格项生效（即该网格项需有position: relative或其他定位值） - 注意：父容器必须是
display: grid，且已用grid-template-areas定义了命名区域
用 grid-row / grid-column 实现更灵活的重叠
比起依赖命名区域，直接用 grid-row 和 grid-column 指定起止线，更容易实现局部重叠（比如一个卡片盖住另一个卡片的右下角）。
-
grid-row: 2 / 4表示从第 2 行线开始、到第 4 行线结束（跨越第 2、3 行） - 允许使用负值，如
grid-column: -2 / -1表示倒数第二列到倒数第一列 - 若两元素的行列范围存在交集（如 A 是
1 / 3，B 是2 / 4），就产生重叠
.item-a {
grid-row: 1 / 3;
grid-column: 1 / 3;
}
.item-b {
grid-row: 2 / 4;
grid-column: 2 / 4;
}
重叠时内容被裁剪？检查 overflow 和 place-items
重叠本身不会触发裁剪，但如果父容器设置了 overflow: hidden，或子项用了 place-items: center 等对齐方式导致内容溢出被截断，就可能误以为“没重叠成功”。
- 确认父容器没有
overflow: hidden或clip-path - 网格项默认不伸缩填满区域，若希望内容撑开或居中，需显式设置
justify-self/align-self - 避免在重叠区域里用
transform: scale(0.9)类操作，可能干扰点击热区判断
调试重叠布局的实用技巧
立即学习“前端免费学习笔记（深入）”；
- 给每个重叠项加临时边框：
outline: 2px dashed red（比border不占布局空间） - 用
background: rgba(255, 0, 0, 0.1)查看实际覆盖范围 - 在 DevTools 的 Layout 面板中勾选 “Show grid areas” 和 “Show line numbers”，能直观看到网格线与区域边界
- 注意：Firefox 的 Grid Inspector 比 Chrome 更早支持
grid-area可视化高亮
