grid-area相同不等于绝对定位式层叠，因元素仍属grid布局流、受gap和place-items影响，且z-index在static下无效；需加position:relative激活z-index才能控制层叠顺序。
单纯用 grid-area 把多个元素塞进同一区域，不会自动获得类似 position: absolute 的“脱离文档流+自由叠放”效果——它只是让元素共享一个格子，但仍在 Grid 布局流中，且默认不响应 z-index。
为什么 grid-area 相同 ≠ 绝对定位式层叠
浏览器把所有 grid-area: "cover" 的元素都放进那个命名区域，但它们仍受 Grid 轨道约束、会响应 gap、会被 place-items 影响；而 position: absolute 子项完全脱离布局流。更关键的是：z-index 在 position: static（默认值）下无效，所以即使重叠了，也无法控制谁在上谁在下。
- 只写
grid-area: "overlay"，没配position: relative→z-index完全被忽略 -
grid-template-areas里没声明"overlay"→ 元素回退到 auto-placement，可能挤在左上角 - 复制粘贴带中文引号或全角空格 →
"overlay"≠ “overlay”，名字不匹配
必须加 position: relative 才能启用 z-index
position: relative 是最安全的选择：它不改变 Grid 分配的位置，只激活层叠能力，让 z-index 生效。Grid 容器本身不需要加 position，也不需要设 z-index 来“开启”子项的层级控制。
- 错误写法：
.item { z-index: 10; }→ 无反应 - 正确写法：
.item { position: relative; z-index: 10; }→ 立刻参与层叠排序 - 避免用
position: absolute：它会让元素无视grid-column和grid-row，必须手动设inset: 0或宽高才能填满
用 grid-column / grid-row 实现更可控的局部重叠
比起依赖命名区域，直接用行列线指定范围更灵活，也更容易调试。只要两个元素的 grid-row 和 grid-column 范围存在交集，就构成重叠区域，且不受 grid-template-areas 拼写错误影响。
- 覆盖整个容器：
grid-row: 1 / -1; grid-column: 1 / -1 - 局部错位重叠：
grid-column: 2 / 4; grid-row: -2 / -1（占第 2–3 列、倒数第二行） - 零宽陷阱：
grid-column: 2 / 2→ 宽度为 0，元素不可见 - 调试技巧：Chrome DevTools → Layout 面板 → 勾选 “Show line numbers”，一眼看出实际占位
真正容易被忽略的是层叠上下文隔离——比如父容器加了 transform: scale(0.99) 或 opacity: 0.99，就会创建新层叠上下文，导致子项的 z-index 只在内部生效，无法穿透到兄弟容器。这点在做全局 toast、模态框等跨区域覆盖时尤为关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
