grid-area相同仅使元素落入同一网格区域，不会自动产生可控重叠；必须设置position（如relative）激活z-index，且需确保grid-template-areas中已声明该区域名，拼写一致、无隐形字符。
grid-area 相同 ≠ 自动重叠生效
只写 grid-area: "cover"，两个元素不会“自动叠好”，它们只是被分配到同一个命名区域。浏览器按 DOM 顺序堆叠（后写的盖前面），z-index 在 position: static（默认值）下完全无效。这不是 Grid 失效，而是 CSS 层叠规则本身的要求。
常见错误现象：grid-area: "overlay" 写了，但元素并排显示、没重叠，或重叠了但层级错乱。原因通常是：
-
grid-template-areas里没声明"overlay"—— 比如只写了"header main"，却让子项用grid-area: "overlay"，结果元素回退到 auto-placement，挤在左上角 - 复制粘贴时混入全角空格或中文引号，导致名字不匹配（
"overlay"≠“overlay”） - 某行少写一个
.占位符，例如三列布局中写成"nav main"而非"nav main ."，整行列数偏移，区域错位
必须加 position 才能让 z-index 生效
Grid 子项默认是 position: static，此时 z-index 被忽略。要启用层级控制，必须显式设置定位属性：
- 推荐用
position: relative：不影响布局流，语义清晰，最安全 - 避免用
position: absolute：它会让元素脱离 Grid 轨道，不再响应grid-column或grid-row，需手动设宽高或用inset: 0 - 父容器不需要加
position来“开启”子项的z-index，只要子项自己定位就行
错误写法：.item { z-index: 10; } → 完全没反应
正确写法：.item { position: relative; z-index: 10; } → 立刻参与层叠排序
用 grid-row / grid-column 实现更可控的局部重叠
比起依赖命名区域，直接用行列线指定范围更灵活，也更容易调试重叠边界。只要两个元素的 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，比反复写"overlay overlay"更可靠 - 调试技巧：Chrome DevTools → Layout 面板 → 勾选 “Show line numbers”，一眼看出实际占位；注意
gap不产生线号，别把它当轨道边界
跨容器重叠时 z-index 失效的真相
Grid 容器自身会创建新的层叠上下文（stacking context）。这意味着子项的 z-index 只在该容器内比较，无法穿透到兄弟容器或 body。比如给卡片里的头像设 z-index: 999，它盖不住另一个独立弹窗。
验证方法：检查父级是否意外触发新层叠上下文——比如设置了 transform、opacity: 0.99、filter 或 will-change。
若需跨容器覆盖（如全局 toast 盖住侧边栏），必须给整个 Grid 容器设 z-index，而不是只调子项。
最易被忽略的一点：重叠区域的点击事件默认穿透——上面的元素没设 pointer-events: none 或 pointer-events: auto，就可能点不中底层内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
