直接设相同 grid-area 并配 position: relative 和 z-index 可实现重叠；仅 grid-area 相同不保证叠放顺序，dom 顺序和层叠规则仍起作用，z-index 对 static 无效，须检查 computed position。
直接给两个元素设相同的 grid-area 名称，再加 position: relative 和 z-index，就能实现完全重叠；不写 position，z-index 就是摆设。
grid-area 相同 ≠ 元素自动叠好
只写 grid-area: "cover"，两个元素只是被分配到同一个命名区域，浏览器仍按 DOM 顺序渲染：后写的盖前面。这不是 Grid 失效，而是 CSS 层叠规则的默认行为。
- 常见错误：在 React 中写成
{search && <div classname="overlay"></div>}+<div classname="content"></div>，以为后者一定在下层——但search状态切换会改变插入顺序，层级不可控 - 必须确保
grid-template-areas里真有"cover"这一行，拼写一致、无全角空格或中文引号（"cover"≠ “cover”） - 三列布局中若漏写占位符，比如写成
"nav main"而非"nav main ."，整行列数错位，区域实际未对齐
z-index 不生效？先查 position
z-index 对 position: static（默认值）完全无效。DevTools 的 Computed 面板里一看便知：如果 position 还是 static，那 z-index 就等于没写。
- 统一用
position: relative：不破坏 Grid 布局流，语义清晰，最安全 - 别用
position: absolute单纯为了启用z-index——它会让元素脱离 Grid 轨道，grid-column和grid-row全部失效 - 父容器不用加
position或z-index，Grid 容器本身不创建层叠上下文，子项的z-index只需在本容器内比较
用 grid-column / grid-row 更精准控制重叠范围
相比依赖命名区域，直接用行列线指定范围更可控，也更容易调试边界。只要两个元素的 grid-row 和 grid-column 范围存在交集，就构成重叠区域。
- 安全写法：
grid-column: 2 / 4（占第 2、3 列），grid-row: -2 / -1（倒数第二行到最后一行） - 零宽陷阱：
grid-column: 2 / 2→ 宽度为 0，元素不可见 - 覆盖整个容器：
grid-row: 1 / -1+grid-column: 1 / -1，比反复写grid-area: "overlay"更可靠 - Chrome DevTools → Layout 面板 → 勾选 “Show line numbers”，一眼看出实际占位；注意
gap不产生线号，别把它当轨道边界
跨 Grid 容器的重叠最容易被忽略：每个 display: grid 容器都会创建新的层叠上下文，子项的 z-index 无法穿透到兄弟容器。比如一个卡片里的图标设了 z-index: 999，但它盖不住另一个独立的 display: grid 弹窗——这时候得提升共同祖先的 z-index，而不是堆高子项数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
