grid-area值相同仅使元素落入同一网格区域，不自动控制重叠层级；真正决定上下顺序的是z-index配合position（需非static），且须处于同一层叠上下文。
直接说结论：grid-area 值相同只是让多个元素“落在同一网格区域”，不等于自动产生可控重叠；真正决定谁在上、谁在下的，是 z-index + position，且必须确保它们处于同一层叠上下文。
为什么 grid-area 相同却没重叠效果
常见错误现象：grid-area: "cover" 写了，但两个元素并排显示、没重叠，或者重叠了但层级乱序。
原因不是 Grid 失效，而是：Grid 容器只负责划分轨道，不创建层叠上下文；z-index 对 position: static（默认值）的元素完全无效。
- 必须给需要分层的子项显式加
position: relative（最安全，不影响布局流） -
grid-template-areas中必须声明该名字，例如grid-template-areas: "cover cover" "cover cover"，否则元素可能被丢进 auto-placement 区域，甚至不渲染 - 如果只写
grid-template-areas: "cover"（单列），而容器有两列宽，默认第二列会塌缩，导致视觉错位
如何用 grid-column / grid-row 实现多行列重叠
比依赖命名区域更灵活，适合局部重叠（比如一个按钮盖住卡片右下角）。
关键点：只要两个元素的 grid-row 和 grid-column 范围存在交集，就构成重叠区域。
- 正确写法：
grid-column: 2 / 4（占第 2 到第 4 列线之间，即第 2、3 列）；grid-row: -2 / -1（倒数第二行到最后一行） - 错误写法：
grid-column: 2 / 2（宽度为 0，元素不可见）；grid-row: 1（等价于1 / 2，没问题，但容易误以为能跨行） - 若需覆盖整个容器：用
grid-row: 1 / -1+grid-column: 1 / -1，比反复写"overlay overlay"更可靠
z-index 在 Grid 中生效的硬性条件
写了 z-index: 999 却没用？大概率卡在这三步上。
- 子元素没设
position（relative、absolute、fixed或sticky任一即可） - 父容器用了
overflow: hidden或其他裁切属性，把高z-index元素截掉了 - 某个祖先元素设置了
transform、filter或will-change，意外创建了新层叠上下文，把你的z-index锁死在局部
实操建议：z-index 值不用大，1 和 2 就够区分；避免负值，尤其当父容器有 overflow: hidden 时，负值元素可能直接消失。
React 动态叠加场景下的推荐写法
比如搜索面板条件渲染后要自然盖住主内容，又不想用 position: absolute（怕响应式失效或可访问性问题）。
核心思路：靠 DOM 顺序 + 共享 grid-area 实现“插入即覆盖”，不推挤布局。
- Grid 容器设
grid-template-areas: "overlay"，宽高可设为auto或100vh - 所有待叠加元素（如
.search-panel、.main-content）都设grid-area: overlay - 把条件渲染的元素写在后面，例如
{search && <div classname="search-panel">} 放在 <code><div classname="main-content"> 之后，则它默认在上层 <li>如需强制某元素始终在顶层，加 <code>position: relative; z-index: 1即可，无需全局调大
最容易被忽略的一点：Grid 容器本身不需要 position，但一旦你给某个子项加了 position: absolute，它就脱离 Grid 轨道了——此时 grid-column 和 grid-row 失效，别混用。
