Grid子元素重叠是设计机制而非bug；需先让元素落在同一网格区域（通过grid-area命名复用、grid-column/grid-row写死相同值或grid-area全区域覆盖），再设position: relative激活z-index控制层级，且需注意DOM顺序与拼写一致性。
Grid 子元素重叠不是 bug，是设计机制；关键在于让它们落在同一网格区域，再用 z-index 控制谁在上、谁在下——但前提是必须先设 position: relative。
让多个元素落到同一个格子
重叠的前提是空间重合。三种方式选一种即可：
-
grid-area命名复用：在grid-template-areas里写重复名字，比如"header header"或"main overlay"，对应子元素都设grid-area: "overlay" -
grid-column和grid-row写死相同值：比如都设grid-column: 2 / 3; grid-row: 1 / 2;，确保起止线完全一致 - 全区域覆盖：遮罩层常用
grid-area: 1 / 1 / -1 / -1;，直接铺满整个容器
注意：grid-template-areas 里没声明的名称，grid-area 值再对也不生效；拼写大小写、引号类型、空格数都必须严格一致。
z-index 不生效？先检查 position
z-index 在 Grid 子项上默认无效，因为初始 position 是 static。这不是 Grid 的锅，是 CSS 层叠规则本身的要求。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 错误写法：
.overlay { z-index: 10; }→ 完全没反应 - 正确写法：
.overlay { position: relative; z-index: 10; }→ 立刻参与排序 - 别为了启用
z-index盲目用position: absolute，否则元素会跳出网格轨道，宽高需手动补（如加inset: 0） - 父容器不用加
position: relative“开启”子项的z-index，子项自己定位就行
层级顺序由 DOM + z-index 共同决定
即使写了 z-index，也不能忽略 HTML 顺序的影响：
- 两个元素都满足「同区域 +
position: relative」，z-index才真正起作用 - 但后写的元素默认层叠更高；想确保可控，建议统一设
z-index，数值严格递增（如1、2、3） - 别用
9999这类大数，1和2就足够区分；负值慎用，可能被父容器裁切
调试时直接看 DevTools 的 Computed → grid-area，比翻源码快；显示为 auto 或空，说明命名根本没匹配上。
响应式切换后重叠错乱怎么办
媒体查询改了 grid-template-areas，但没同步更新子元素的 grid-area，视觉就容易崩：
- 确保媒体查询里的
grid-template-areas定义写在常规样式之后，CSS 层叠规则下后者才生效 - 不要只改容器定义，忘了改子元素的
grid-area值（比如桌面端用"header nav main aside"，移动端改成两行，nav和aside若仍保持原grid-area，就可能叠错位） - 临时测试法：把
grid-area: "sidebar"改成grid-area: "sidebar-1"和grid-area: "sidebar-2"，看是否还重叠——能快速锁定冲突点
最易被忽略的是：重叠本身没问题，问题出在你没意识到 grid-area 拼写错了一处空格，或 z-index 没配 position，而 DevTools 的 Computed 面板一眼就能戳破这些假象。
