用 grid-template-areas 实现多元素叠入同一区域需共用相同 area 名，但层叠由 dom 顺序和 position + z-index 控制；更直接的方式是用 grid-row/grid-column 指定重叠行列范围。
grid-template-areas 里多个元素怎么叠进同一个区域
用 grid-template-areas 定义区域时，它本身不控制层叠顺序，只负责“把谁扔进哪个格子”。真正决定谁盖在谁上面的，是 DOM 顺序 + z-index（前提是这些元素都设了 position: relative 或更高级定位）。
常见错误现象：grid-area 值一样，但后写的元素没显示出来——其实是被前一个盖住了，或者根本没触发层叠上下文。
- 所有要叠在一起的元素必须显式声明
position: relative（或absolute），否则z-index无效 - 它们得共享同一个
grid-area名，比如都设grid-area: header; -
z-index值越大越靠前，但注意：如果父容器没形成层叠上下文，子元素的z-index可能被截断
用 grid-row / grid-column 强制重叠单元格
比 grid-template-areas 更直接的方式：不用区域名，直接用行列线坐标让多个元素占据同一网格轨道范围。
使用场景：动态生成内容、响应式中需灵活覆盖、或者根本懒得起区域名。
立即学习“前端免费学习笔记（深入）”；
参数差异：grid-row: 1 / 3 表示从第 1 行线到第 3 行线（即跨两行），grid-column: 2 / 4 同理；只要两个元素的行列范围有交集，就会物理重叠。
- 重叠后默认按 HTML 流顺序堆叠（后面元素在上面），无需
z-index也能看到效果 - 若要精确控制上下关系，仍需加
position+z-index，尤其当元素含transform或opacity时，可能意外创建新层叠上下文 - 注意
grid-row和grid-column的起止值不能写反，2 / 1是无效的，会被浏览器忽略
overflow: hidden 导致叠加元素被裁切
网格容器设了 overflow: hidden，但子元素用了 position: absolute 或负 margin 往外偏移，结果被截掉——这不是层叠问题，是溢出裁剪惹的祸。
性能影响：开启 overflow: hidden 可能让浏览器放弃某些合成优化，尤其在滚动或动画中。
- 检查网格容器是否无意中带了
overflow: hidden（比如重置样式表或 UI 框架默认值） - 如果确实需要裁剪，又想保留绝对定位元素的完整显示，可改用
clip-path或包一层无溢出的 wrapper - 用
contain: layout paint可能加剧裁剪行为，调试时建议临时移除
Firefox 中 z-index 在 grid 容器内失效的兼容性坑
Firefox 旧版本（≤115）对网格项的 z-index 支持不一致：当元素没设 position，仅靠 display: grid 子项身份，z-index 可能被忽略。
错误信息：z-index has no effect on non-positioned elements 这类警告在 Firefox 开发者工具里不一定弹出，但表现就是层叠不对。
- 必须为每个要参与层叠的网格项加
position: relative，哪怕只是position: relative; z-index: 0 - 避免依赖“网格项自动获得层叠上下文”这种模糊认知，不同浏览器实现差异大
- 如果用 CSS-in-JS 或构建工具注入样式，确认
position规则没被覆盖或提升失败
最麻烦的不是叠不起来，而是叠错了顺序还查不出原因——DOM 顺序、position 类型、父容器是否形成新层叠上下文，这三个点漏掉任何一个，都会让 z-index 变成摆设。
