css grid重叠需先让子项物理占据同一网格区域（如grid-column/grid-row交集或相同grid-area），再配合position: relative和z-index控制层级；z-index对static元素无效，且受父容器层叠上下文限制。
直接说结论：CSS Grid 本身不“禁止”重叠，但重叠不会自动发生——必须让多个子项**物理上落在同一网格区域**，再用 z-index 控制谁在上；而 z-index 要生效，position 缺一不可。
grid-area 相同只是起点，不是重叠完成信号
写 grid-area: "overlay" 两个元素，只表示它们被分配到同一个命名区域，但浏览器仍按 DOM 顺序堆叠（后写的盖前面），且 z-index 在默认 position: static 下完全无效。
- 必须先在父容器中明确定义：
grid-template-areas: "overlay overlay" "overlay overlay"（两行两列都叫overlay），否则名字不匹配，元素会回退到 auto-placement 区域，甚至挤在左上角 - 复制粘贴时容易混入全角空格或中文引号，导致
"overlay"≠ “overlay” - 三列布局中若漏写占位符，比如写成
"nav main"而非"nav main ."，整行列数偏移，区域错位
z-index 不生效？90% 是因为 position 缺失或层叠上下文干扰
z-index 对 position: static（默认值）完全无效——这不是 Grid 的限制，是 CSS 层叠规则本身的要求。
- 正确写法：
.overlay { position: relative; z-index: 2; }——relative不改变 Grid 布局位置，只激活层叠能力 - 别用
position: absolute单纯为了启用z-index，否则它会脱离 Grid 轨道，无视grid-column设置 - 如果加了
position和z-index还不生效，检查父容器是否设置了opacity: 0.99、transform: translateZ(0)、filter: blur(1px)或will-change: transform—— 这些都会创建新层叠上下文，把子项的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-column: 2等价于2 / 3，但容易漏掉跨列意图 - 覆盖整个容器：
grid-row: 1 / -1+grid-column: 1 / -1，比反复写"overlay overlay"更可靠
跨 Grid 容器重叠时 z-index 失效是常态
Grid 容器自身会创建新的层叠上下文（stacking context）。这意味着子项的 z-index 只在该容器内比较，无法穿透到兄弟容器或 body。
- 典型现象：给卡片里的图标设
z-index: 999，但它盖不住另一个独立display: grid的弹窗 - 若需跨容器覆盖（如全局 toast 盖住侧边栏），必须给整个 Grid 容器设
z-index，而不是只调子项 - 最容易被忽略的是点击事件穿透——视觉上盖住了，但鼠标事件仍可能落到下层元素上，需用
pointer-events: none或显式控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
