z-index在css grid中“失效”通常因元素不在同一层叠上下文：grid容器加transform等属性会创建独立层叠上下文，子项z-index仅在内部生效；重叠区域的层级由dom顺序和显式z-index共同决定，position: absolute会使元素脱离grid层叠体系。
grid-area 重叠时 z-index 不生效？先看是否在同一个 stacking context
z-index 在 CSS Grid 里“失效”，90% 是因为元素不在同一层叠上下文（stacking context）里。Grid 容器本身不会自动创建新的 stacking context，但一旦你给容器加了 transform、opacity、Filter 或 will-change，它就变成一个独立 stacking context——这时候子项的 z-index 只在该容器内部比高低，跨容器完全不比较。
- 检查 Grid 容器有没有意外触发 stacking context 的属性（比如
transform: translateZ(0)） - 如果多个 grid-item 来自不同父容器（例如嵌套 grid），它们的
z-index互不感知 - 想让 A 区域盖住 B 区域，最稳的方式是确保它们同属一个 grid 容器，并且显式设置
z-index
grid-template-areas 里两个区域重叠，哪个在上？
纯靠 grid-template-areas 定义的区域不会自动产生层级关系；重叠行为由 grid item 的 DOM 顺序 + z-index 共同决定。DOM 后出现的 item 默认在上（相当于隐式 z-index: auto），但如果都设了 z-index，就按数值大小来。
- 区域重叠 ≠ 元素重叠：只有实际渲染出的 grid item 才参与层叠计算
-
grid-area: header;的元素如果 DOM 在前，即使它定义在grid-template-areas后面，也不会自动“后绘制” - 避免依赖 DOM 顺序控制层级，显式写
z-index: 1/z-index: 2更可靠
设置了 z-index 却还是被其他元素穿透？检查 grid item 是否脱离文档流
如果某个 grid item 应用了 position: absolute，它会脱离 grid 的布局流，同时脱离 grid 容器的 stacking context 约束——此时它的 z-index 相对于最近的定位祖先（可能是 body），而不是 grid 容器。
- grid item 内部用
position: absolute做装饰？没问题，但别让它作为主内容容器 - 想让它还在 grid 的层级体系里，就别用
position: absolute，改用place-self或justify-self调整位置 - 常见错误：
grid-item { position: relative; z-index: 1; }没问题；但加了position: absolute后，z-index就不再和兄弟 grid item 对齐了
firefox 和 chrome 对 grid + z-index 的处理有差异吗？
现代浏览器对规范实现基本一致，但有一个真实差异点：当 grid item 使用 clip-path 或 mask 时，Chrome（v115+）可能让其 z-index 行为更“严格”，而 Firefox 有时仍按旧逻辑把 clipped 区域视作可交互层。这不是 bug，而是 clipping 是否影响 stacking context 的解释差异。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
clip-path隐藏后还能靠z-index控制覆盖关系 - 如果必须裁切又需精确控层，用
overflow: hidden+z-index组合更稳妥 - 真遇到跨浏览器不一致，优先用
isolation: isolate显式隔离 stacking context 边界
真正麻烦的不是 z-index 写不对，而是你以为它在管全局，其实它只管自己那一小块 stacking context。查层级问题，先打开 DevTools 的 Layers 面板（Chrome）或 3D View（Firefox），看实际 stacking context 树长什么样——比猜强得多。