重叠是 Grid 的默认行为而非 bug；grid-area 值相同时元素必然重叠，DOM 顺序决定层叠次序，z-index 需配合 position: relative 才生效，用 grid-row/column 可更精准控制重叠范围。
重叠不是 bug，是 Grid 的默认行为；关键在于你是否意识到它会发生，以及是否主动控制了层级和定位。
grid-area 值相同就必然重叠，DOM 顺序决定谁在上
多个元素写 grid-area: "header"，而 grid-template-areas 中 "header" 只占一个格子，它们就会叠在一起。后出现在 HTML 中的元素自然盖在前面的上面。
- 这不是样式没生效，而是完全符合规范——Grid 允许区域复用，只是不自动错开
- 检查所有
grid-area值是否拼写一致（大小写、引号、空格、点号.占位都算不同） - 用 DevTools 的 Elements 面板直接看每个元素的 computed
grid-area，比查源码更快定位冲突 - 临时加唯一后缀测试，比如把
grid-area: "sidebar"改成grid-area: "sidebar-1"和"sidebar-2"，看是否还叠
z-index 不生效？先加 position: relative
z-index 在 Grid 子项上默认无效，因为它们是 position: static。这不是 Grid 的限制，是 CSS 层叠规则本身的要求。
- 错误写法：
.item { z-index: 10; }→ 完全没反应 - 正确写法：
.item { position: relative; z-index: 10; }→ 立刻参与层叠排序 - 父容器不需要
position: relative来“开启”子项的z-index，只要子项自己定位就行 - 如果重叠区要弹出浮层，别把它塞进 Grid 区域里，挂到
body下更稳妥
用 grid-row/grid-column 替代 grid-area 实现局部重叠
比起依赖命名区域，直接用行列线控制范围更灵活，也更容易调试重叠边界。
立即学习“前端免费学习笔记（深入）”；
-
.a { grid-row: 1 / 3; grid-column: 1 / 3; }和.b { grid-row: 2 / 4; grid-column: 2 / 4; }就会在中间 2×2 区域重叠 - 避免只写起点，比如
grid-column: 2等价于2 / 3，容易误判跨度 - 负值可用，但要小心：如
grid-column: -2 / -1表示倒数第二列到倒数第一列 - 用
span更语义化：grid-column: 2 / span 2比2 / 4更易维护
重叠后内容被裁剪？先查 overflow 和隐式轨道
重叠本身不会触发裁剪，但父容器设了 overflow: hidden，或某项内容撑破轨道高度，就会看起来像“没叠上去”或“消失了一块”。
- 确认父容器没有
overflow: hidden或clip-path—— 它们会直接裁掉重叠部分 - 检查是否启用了
grid-auto-flow: dense：它会让小项目主动填空，可能把两个本不该同格的项塞一起 - 用 DevTools Layout 面板看有没有 “implicit grid track”，隐式轨道高度为
auto时可能塌陷，导致项看似重叠实则错位 - 给重叠项加临时
outline: 2px dashed red或background: rgba(0,0,0,0.1)，能立刻看清实际覆盖范围
真正难的不是让它们叠起来，而是叠完之后点击热区是否准确、键盘焦点是否合理、屏幕阅读器能否正确播报——这些往往比布局本身更花时间。
