grid子项重叠是正常布局行为，需通过grid-column/row范围、grid-area命名、z-index配合position:relative等主动控制；devtools可辅助排查线号、计算值与断点影响。
Grid 子项重叠不是 bug，是布局配置的自然结果；关键在于判断是否需要重叠，再决定用 grid-area、grid-column/grid-row 还是 z-index 主动控制。
检查 grid-column 和 grid-row 是否重复分配
多个子项写相同的行列范围，就会落在同一单元格里，默认按 HTML 顺序后写的盖前写的。
- 用 DevTools 的 Layout 面板勾选 “Show line numbers”，直接看每个元素实际占哪几条线
-
grid-column: 2等价于2 / 3，跨度为 1；若两个元素都这么写，必然重叠 - 避免起止线写反：
grid-column: 3 / 1会被浏览器自动纠正为1 / 3，但语义已失，容易误判 - 改用
span语法更安全：grid-column: 2 / span 2比2 / 4更易维护
确认 z-index 是否配合 position: relative 生效
z-index 在 Grid 子项上默认无效，因为它们初始是 position: static；不加定位，设再大的值也没反应。
- 必须显式写
position: relative（不脱离网格轨道，不影响grid-column控制） - 错误写法：
.item { z-index: 10; }→ 完全不生效 - 正确写法：
.item { position: relative; z-index: 2; }→ 立刻参与层叠 - 父容器不用加
position: relative来“开启”子项的z-index，子项自己定位就行 - 慎用
position: absolute：它会跳出网格尺寸，需手动补inset: 0或宽高才能填满格子
排查 grid-area 命名冲突与响应式断点影响
多个元素共用同一个 grid-area 名称，而该名称在 grid-template-areas 中只占一个单元格，就一定会重叠——这是规范行为，不是样式失效。
- 用 DevTools Elements 面板直接查每个元素的 Computed →
grid-area，显示为auto或空值说明命名没匹配上 - 拼写必须完全一致：
"header"≠'header'，"sidebar "≠"sidebar"，.占位符也不能少 - 临时测试法：把
grid-area: "nav"改成grid-area: "nav-1"和"nav-2"，看是否还叠——快速锁定冲突点 - 媒体查询中改
grid-template-areas后，务必同步更新所有子元素的grid-area值，否则新旧映射错乱，小屏下突然重叠
真正难处理的不是重叠本身，而是重叠后 DOM 顺序和 z-index 同时起作用时的隐式层叠上下文——比如父容器加了 opacity: 0.99 或 transform，子项的 z-index 就会在局部生效，不再和页面其他区域比高低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
