grid-area 值重复会导致多个网格项叠在同一区域，这是规范允许的行为；z-index 对 static 元素无效，需配合 position 才生效；行列线交集可主动控制局部重叠；重叠后内容“消失”常因 overflow、dense 布局或隐式轨道塌陷所致。
grid-area 值重复导致必然重叠
多个网格项写相同的 grid-area: "header"，而 grid-template-areas 中 "header" 只占一个格子，它们就会叠在同一位置。这不是 bug，是 Grid 规范明确允许的行为——区域名复用不等于自动错开。
常见错误现象：两个 <div class="nav"> 都设了 <code>grid-area: "nav"，结果第二个盖住第一个；DevTools 里看到 computed grid-area 确实都是 "nav"，但没意识到这是设计使然。
- 检查所有
grid-area值是否拼写完全一致（大小写、引号、空格、点号.占位都算不同） - 用 DevTools Elements 面板直接看每个元素的 computed
grid-area，比查源码更快定位冲突 - 临时加唯一后缀测试，比如把
grid-area: "sidebar"改成grid-area: "sidebar-1"和grid-area: "sidebar-2"，看是否还叠
z-index 在 Grid 项上默认不生效
z-index 对 position: static 元素无效，而 Grid 子项默认就是 static。你写了 .item { z-index: 10; }，它根本不起作用。
常见错误现象：两个重叠项分别设了 z-index: 1 和 z-index: 99，但层级没变化；后写的 HTML 元素始终在上——因为 DOM 顺序才是决定性因素。
- 必须显式加
position: relative（或absolute、sticky）才能让z-index生效 - 父容器不需要
position: relative“开启”子项的z-index，子项自己定位就行 - Grid 区域本身不创建层叠上下文，
z-index只在同级 grid item 间比较；若一个元素是另一个的子元素，它们不在同一层叠上下文中，z-index不可比
grid-row / grid-column 范围交集引发局部重叠
比起依赖命名区域，直接用行列线控制更容易产生可控重叠。比如 .a { grid-row: 1 / 3; grid-column: 1 / 3; } 和 .b { grid-row: 2 / 4; grid-column: 2 / 4; }，它们在中间 2×2 区域自然交叠。
常见错误现象：本想让卡片 B 盖住卡片 A 的右下角，却写成 grid-column: 2（等价于 2 / 3），结果只盖住一列，误判了跨度。
- 避免只写起点，明确写终点或用
span：grid-column: 2 / span 2比2 / 4更易维护 - 负值可用，但要小心：
grid-column: -2 / -1表示倒数第二列到倒数第一列 - 用 DevTools Layout 面板勾选 “Show line numbers”，能直观验证行列线是否真有交集
重叠后内容“消失”其实是被裁剪或错位
重叠本身不会导致内容不可见，但以下情况会让重叠看起来像“没叠上去”或“被吃掉”：
- 父容器设了
overflow: hidden或clip-path，直接裁掉重叠部分 - 启用了
grid-auto-flow: dense，小项目被自动填进空隙，可能把两个本不该同格的项塞一起 - 隐式轨道高度为
auto时塌陷，导致项看似重叠实则错位（比如某项内容撑高了行，另一项没跟着动） - 重叠区里用了
transform: scale(0.9)，可能干扰点击热区，让人误以为“点不到”
真正难的不是让它们叠起来，而是叠完之后的交互响应、焦点顺序和屏幕阅读器播报——这些没法靠 CSS 自动解决。
