z-index在Grid容器内仅对同级网格项有效，重叠时按DOM顺序覆盖而非z-index；Grid区域不创建层叠上下文，需isolation: isolate等触发才能使z-index生效。
Grid区域重叠时z-index不生效？
直接说结论：z-index 在 Grid 容器内只对**同级网格项（grid items）** 有效，如果两个元素被分配到同一 grid-area（比如都设为 area: header），它们的层叠顺序不取决于 z-index，而取决于 DOM 顺序——后写的元素盖在前面元素上，z-index 被忽略。
常见错误现象：
- 给两个
div都设置了grid-area: main，再分别加z-index: 10和z-index: 1，但层级没变化 - 用
position: absolute覆盖 Grid 区域，结果被 Grid 项意外遮挡，以为是z-index没设够
根本原因：Grid 区域本身不是“层叠上下文生成器”，只有当元素自身触发了层叠上下文（如 opacity: 0.99、transform: translateZ(0)、或 isolation: isolate），它内部的 z-index 才能独立起作用；否则所有同级 grid item 共享一个层叠上下文，DOM 顺序决定覆盖关系。
想让重叠的 Grid 项按 z-index 排序？先确认是否真在同级
绝大多数“重叠失效”问题，其实是因为误以为两个元素是并列 grid item，实际一个是子元素、一个是容器，或者其中一个被 display: contents 剥离了盒模型。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用浏览器开发者工具的“Layout”面板勾选
Show grid areas，确认两个元素确实都被分配到了同一个grid-area名称下 - 检查父容器是否用了
display: contents或display: none，这些会让子元素脱离 grid formatting context - 确保两个目标元素都是直接子元素（即都直属于同一个
display: grid容器），否则z-index不可比 - 如果必须跨层级控制层级，改用
position: relative+z-index组合，而不是依赖 Grid 分配
Grid 中用 position 覆盖区域，层级被截断怎么办？
典型场景：在 grid-area: sidebar 里放一个弹出菜单，用 position: absolute 向外伸展，结果被父 Grid 容器裁剪或压在其他区域下面。
这是因为 Grid 容器默认不创建新的层叠上下文，但它的 overflow: hidden（或 auto）会裁剪绝对定位内容；同时，如果 Grid 容器自身有 z-index（比如在 flex 布局中作为子项），它可能整体低于兄弟元素。
解决路径：
- 给 Grid 容器加
isolation: isolate，强制创建层叠上下文，让其内部z-index独立计算 - 避免在 Grid 容器上设
overflow: hidden；若必须裁剪，改用clip-path或包裹一层无样式的div - 弹出层不要放在 Grid 区域内部 DOM 结构里，而是挂到
body下，用 JS 动态定位，绕过 Grid 层级限制 - 检查 Grid 容器的父级是否有
transform、filter等属性——这些也会隐式创建层叠上下文，影响外部比较
Grid-area 重叠 + 多层嵌套时，谁说了算？
真实项目里常出现：Grid 容器 A → 子元素 B（也是 display: grid）→ 元素 C 和 D 又分配到同一 grid-area。这时 C 和 D 的层叠，既受 B 内部 DOM 顺序影响，也受 A 对 B 的 z-index 控制，还可能被 B 的 transform 锁死层级范围。
关键判断点：
- 每层 Grid 容器是否显式设置了
z-index？没有的话，它和兄弟元素比永远是“自动堆叠层级”，不可控 - 任意一层用了
transform、opacity 、<code>will-change，都会创建新层叠上下文，把子元素“锁”在里面，无法越过它和外部元素比z-index -
grid-area重叠本身不产生层叠逻辑，只是布局指令；真正决定谁在上面的，永远是层叠上下文树 + 同上下文内的z-index/ DOM 顺序
复杂点在于：你看到的“重叠”，可能是三层不同上下文叠加的结果，调试时得一层层关掉 transform 或临时加 isolation: isolate 来验证哪一层卡住了层级传递。
