Grid元素自动重叠是因为显式设置相同grid-row/column范围或grid-area，浏览器按DOM顺序层叠显示；需用position+ z-index精细控制层级，避免误配轨道或响应式断裂。
Grid 中元素为什么会自动重叠
Grid 本身不鼓励重叠，但当你显式设置多个子元素的 grid-row 和 grid-column 范围完全一致，或者用 grid-area 指向同一网格区域时，浏览器就会让它们层叠显示——这并非 bug，而是规范允许的行为。常见于模态框、标签页切换、卡片悬浮信息等场景。
关键点在于：Grid 的层叠顺序默认遵循 DOM 顺序（后出现的元素在上层），和 z-index 无关，除非你给元素设置了 position: relative/absolute/fixed 并启用层叠上下文。
用 position + z-index 精确控制重叠层级
一旦需要精细控制谁在上、谁在下，就得打破 Grid 默认的流式层叠逻辑，主动创建层叠上下文。最稳妥的方式是给重叠元素加 position: relative（不改变布局位置），再配合 z-index。
-
z-index只对定位元素（position值为relative、absolute、fixed或sticky）生效 - 避免只设
z-index不设position——此时值被忽略，元素仍在默认文档流层叠顺序中 - 若父容器是
display: grid，子元素设position: absolute会脱离 Grid 轨道，需手动用top/left对齐，容易错位
推荐写法：
立即学习“前端免费学习笔记（深入）”；
