grid-area相同仅表示分配到同一区域，不自动重叠；需显式设position:relative和z-index才生效，且受层叠上下文限制。
grid-area相同只是分配到同一区域，不是自动重叠
两个元素都设 grid-area: "overlay"，只表示它们被放进同一个命名网格区域，浏览器不会因此“自动叠好”。它们仍按 DOM 顺序渲染（后写的盖前面），z-index 在默认 position: static 下完全无效。这不是 Grid 失效，而是 CSS 层叠规则本身的要求。
常见错误现象：
-
grid-template-areas里没声明"overlay"，比如只写了"header main"，结果元素回退到 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 到第 4 列线之间，即第 2、3 列）；grid-row: -2 / -1（倒数第二行到最后一行） - 错误写法：
grid-column: 2 / 2（宽度为 0，元素不可见）；grid-row: 1（等价于1 / 2，但容易误以为能跨行） - 调试建议：打开浏览器开发者工具，勾选 “Show grid areas” 和 “Show line numbers”，一眼看出实际占位
重叠后点击事件穿透和层叠上下文限制
重叠区域默认支持点击穿透——底层元素仍可响应鼠标事件。若需阻止，得加 pointer-events: none 到上层元素，或对底层显式设 pointer-events: auto。
更要紧的是：Grid 容器自身会创建新的层叠上下文，这意味着子项目的 z-index 只在该容器内比较，不会穿透到父容器或其他兄弟 Grid 中。
- 常见误区：给卡片头像加
z-index: 999，以为能盖过整个页面弹窗——其实不行，弹窗若在另一个独立 Grid 或定位元素里，它的层叠上下文更高 - 验证方法：检查父元素是否设置了
transform、opacity 、<code>will-change、filter等触发新层叠上下文的属性 - 安全做法：跨容器重叠必须靠容器自身的
z-index控制，而非子项
真正容易被忽略的点是：命名区域的拼写一致性、position 的显式声明、以及层叠上下文的嵌套关系——这三者缺一，重叠效果就不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
