css grid中元素重叠需满足三条件：1. 多个子项grid-area值相同且匹配父容器grid-template-areas中已声明的命名区域；2. 子项设置position（如relative）以激活z-index；3. z-index生效需处于同一层叠上下文。仅设grid-area相同不会自动可控重叠，浏览器默认按dom顺序堆叠，z-index在position: static下无效。
CSS Grid 本身不阻止重叠，但也不会自动让元素“叠起来”——必须让多个子项物理落在同一网格区域，再用 position 和 z-index 控制谁在上、谁在下；否则只按 DOM 顺序堆叠，且 z-index 完全无效。
grid-area 相同 ≠ 元素自动重叠生效
写 grid-area: "overlay" 两个元素，只是把它们都塞进名为 "overlay" 的区域，但浏览器仍按 HTML 顺序渲染（后写的盖前面），z-index 在默认 position: static 下被忽略。
- 必须先在父容器中明确定义：
grid-template-areas: "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 只在该容器内比较，无法穿透到兄弟容器或 。
- 典型现象：给卡片里的图标设
z-index: 999，但它盖不住另一个独立display: grid的弹窗 - 若需跨容器覆盖（如全局 toast 盖住侧边栏），必须给整个 Grid 容器设
z-index，而不是只调子项 - 最容易被忽略的一点：重叠区域的点击事件默认穿透——视觉上盖住了，但鼠标可能直接点到下层元素，需加
pointer-events: none或显式控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
