Grid子项z-index生效需满足两个条件：元素必须设置position为relative、absolute、fixed或sticky，且在同一堆叠上下文中按数值大小排序，源码顺序仅在未设z-index时起作用。
Grid容器内z-index对子元素无效？
不是z-index失效，而是它只在**同层堆叠上下文（stacking context）中起作用**。Grid容器默认不创建新的堆叠上下文，所以子项的z-index会和父容器外的其他元素直接比——但前提是它们处在同一层（比如都是position: relative或absolute）。如果你发现z-index没反应，大概率是因为没给子项加position属性。
-
z-index只对position值为relative、absolute、fixed或sticky的元素生效 - Grid子项即使被
grid-area定位，也默认是position: static，此时设z-index完全被忽略 - Grid容器本身设
z-index只有在它自己有position且处于某个堆叠上下文中才有意义
Grid项重叠时z-index怎么排序？
当多个Grid子项占据同一网格区域（比如都用grid-area: 1 / 1 / 2 / 2），它们的绘制顺序由**源码顺序 + z-index共同决定**：源码靠后的项默认压在前面的上面；如果都设了z-index，则按数值大小排序（正数越大越上层，负数越小越下层）。
- 没设
z-index时，后声明的子项自动覆盖先声明的（和普通HTML流一样） - 设了
z-index后，数值大的压在数值小的上面，无论DOM顺序 -
z-index: 0和没设z-index效果不同：前者进入堆叠上下文参与比较，后者按源码顺序 fallback
Grid容器设z-index会被“吃掉”吗？
会，但不是被Grid“吃掉”，而是因为**Grid容器自身没形成独立堆叠上下文**，它的z-index只影响它和兄弟元素的关系，不影响内部子项之间的层叠。更常见的情况是：你给容器设了z-index: 10，结果子项还是穿出来盖在别的模块上——那是因为子项的堆叠层级实际继承自容器，而容器又没用position激活z-index。
- 必须同时设置
position: relative（或其他非static）才能让容器的z-index生效 - 容器设
z-index不会自动让子项获得“相对容器的z-index体系”，子项仍按全局堆叠规则计算 - 若想隔离子项堆叠范围，可在容器上加
isolation: isolate，强制创建新堆叠上下文
和Flex布局比，Grid里z-index有啥特殊坑？
没有本质区别，但Grid更容易踩到“重叠却不显效”的坑——因为Grid天然支持多子项占据同一区域，而Flex默认是线性排列。一旦你用grid-template-areas或grid-column/grid-row让几个项挤进同一个格子，又忘了加position，z-index就彻底静音。
立即学习“前端免费学习笔记（深入）”；
- Flex子项同样需要
position才响应z-index，但开发者更少主动重叠Flex项，所以问题暴露得晚 - Grid中用
place-items: center或justify-content: start等对齐方式，不会触发z-index计算，别指望靠它们控制层叠 - 调试时用浏览器开发者工具检查Computed面板里的
z-index是否显示为auto——是的话，说明当前元素根本没进入堆叠比较流程
真正麻烦的是嵌套Grid：内层Grid容器如果没设position，它的z-index就只是个摆设；而它的子项的z-index又是在外层上下文中解析的——这时候谁压谁，光看代码很难直觉判断。
