grid元素z-index不生效是因为其子项未定位且容器未创建层叠上下文；需添加position属性并确保父容器未意外触发opacity、transform等隔离行为。
grid元素z-index不生效的典型表现
明明写了 z-index: 999，但两个 grid 项叠在一起时，后写的那个还是被盖住；或者用 transform: translateZ(1px) 强制提层，结果整个网格错位甚至消失。这不是 z-index 写错了，而是它根本没进入“可比较”的层叠环境。
grid容器默认不创建层叠上下文
只有当一个元素满足特定条件（比如设置了 opacity 小于 1、transform 非 none、isolation: isolate 等）时，才会创建新的层叠上下文——而纯 display: grid 不在其中。这意味着所有 grid 子项的 z-index 都在同一个平面里比大小，但前提是它们得是「定位元素」。
-
z-index只对position值为relative、absolute、fixed或sticky的元素生效；仅靠 grid 布局本身不触发定位行为 - 如果 grid 项没写
position，哪怕加了z-index，浏览器也会直接忽略 - 想让
.first永远压在.second上，最轻量做法是：不依赖z-index，而是控制 DOM 顺序——把.first放在 HTML/JSX 中更靠后的位置
意外创建隔离上下文导致背景或遮罩失效
有时候你只是给父容器加了个 opacity: 0.99 或 will-change: transform，结果 grid 容器背景突然看不见了，或者子项的 z-index 彻底乱套。这是因为这些属性强制创建了新的层叠上下文，把子项锁进了一个独立的绘制层，和外层背景、其他兄弟容器断开了层级关系。
- 检查是否有父级设置了
isolation: isolate—— 这个声明特别容易被框架或 CSS-in-JS 库悄悄注入 -
opacity小于 1 是隐形杀手，哪怕只设opacity: 0.999，也会切断背景透出路径 - 若必须用透明效果又不想破坏层叠，改用
background-color: rgba(0,0,0,0.5)替代opacity
grid项覆盖时需同时处理定位与堆叠逻辑
真正要实现「无位移覆盖」（比如悬浮展开菜单盖住下方内容），不能只调 z-index。Grid 项默认占据自己的轨道空间，强行用 position: absolute 拉出来，会脱离网格流，破坏响应式结构。
- 优先用 Grid 自身的层叠机制：HTML 中后出现的 grid 项天然在上层，这是最稳定、无障碍友好的方式
- 如需微调，给需要上浮的项加
position: relative+z-index: 1，其余保持默认（不设 position） - 避免对多个 grid 项同时设高
z-index并依赖数值比大小——一旦中间插入新项，顺序就不可控 - 注意
grid-auto-flow: dense可能改变视觉顺序，但它不影响 DOM 顺序，所以不会干扰屏幕阅读器读取逻辑
z-index，而是判断当前是否已经处于某个隐式创建的层叠上下文中——这种上下文往往来自你没意识到的一行 opacity 或一个第三方组件的 transform。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
