多个元素设相同grid-area或交叠grid-row/grid-column即可视觉重叠；但层级须靠position+ z-index控制，否则仅按DOM顺序堆叠。
直接给多个元素设相同的 grid-area 或交叠的 grid-row/grid-column 范围，就能让它们视觉重叠；但“谁在上、谁在下”必须靠 position + z-index 控制，否则只按 DOM 顺序堆叠，不可控。
用 grid-row / grid-column 实现精确重叠范围
比命名区域更直观、调试更方便，尤其适合局部重叠（比如图标盖在卡片右下角）。
-
grid-row: 2 / 4表示从第 2 行线开始、到第 4 行线结束（占第 2、3 行） - 两个元素只要行列范围有交集，就构成重叠：例如 A 是
1 / 3，B 是2 / 4→ 重叠发生在第 2、3 行 - 避免写
grid-column: 2 / 2：宽度为 0，元素不可见 - 只写起点如
grid-row: 3等价于3 / 4，容易误判实际跨度，建议显式写全
为什么 z-index 不生效？定位是硬门槛
z-index 在 Grid 子项上默认无效，不是 Grid 的问题，而是 CSS 层叠规则本身的要求：只有非 static 定位的元素才参与层叠排序。
- 错误写法：
.overlay { z-index: 10; }→ 完全没反应，因为默认position: static - 正确写法：
.overlay { position: relative; z-index: 10; }→ 安全、不破坏 Grid 布局流 - 别用
position: absolute单纯为了启用z-index：它会让元素脱离 Grid 轨道，grid-column和grid-row失效 - 父容器不需要加
position来“开启”子项的z-index，子项自己定位就行
命名区域重叠的三个关键前提
用 grid-area: "name" 实现重叠，必须同时满足三件事，缺一不可。
-
grid-template-areas中已声明该名字，且拼写完全一致（注意全角空格、中文引号会破坏匹配） - 所有要重叠的子元素都显式写了
grid-area: "name"，漏一个就会掉出区域、进入自动布局 - 每行的占位符数量必须对齐：三列布局写成
"nav main"而不是"nav main ."，会导致整行列数偏移，区域错位
跨容器重叠时 z-index 失效的真相
Grid 容器自身会创建新的层叠上下文。这意味着子项的 z-index 只在该容器内比较，无法穿透到兄弟容器或 body。
- 典型现象：卡片里的图标设了
z-index: 999，却盖不住另一个独立的display: grid弹窗 - 检查是否意外触发新层叠上下文：
opacity: 0.99、transform、filter、will-change - 若需全局覆盖（如 toast 盖住侧边栏），必须给整个 Grid 容器设
z-index，而不是只调子项 - 调试时用 DevTools 的 Computed 面板搜这些属性，临时禁用看是否恢复
最易被忽略的是层叠上下文的嵌套关系——你以为在调一个数字，其实是在另一个封闭世界里调数字。写 z-index 前，先确认它的作用域边界在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
