Grid子元素z-index无效是因为默认static定位不触发层叠上下文；需添加position: relative等定位属性才能生效，且同级子项按z-index数值或HTML顺序堆叠。
Grid子元素的z-index为什么没反应？
因为z-index只在定位上下文（position值为relative、absolute、fixed或sticky）中生效，而Grid子项默认是static定位——此时z-index被完全忽略。
解决办法很简单：给需要层叠的子元素显式加position: relative（最常用且副作用最小），再设z-index。
- 不加
position，哪怕写z-index: 999也毫无效果 -
position: relative不会改变元素在Grid中的布局位置，只是激活层叠能力 - 避免滥用
absolute，否则会脱离Grid轨道，破坏行列对齐逻辑
多个Grid项重叠时，z-index数值怎么比？
同级Grid子项之间按z-index数值大小决定堆叠顺序，数值大的在上；未设置z-index的按HTML源码顺序，后出现的覆盖先出现的（即“后来居上”规则）。
注意：这个比较只发生在同一网格容器内，父容器的z-index不影响子项之间的相对层级。
立即学习“前端免费学习笔记（深入）”；
-
z-index: 2一定盖过z-index: 1，哪怕后者在DOM里更靠后 - 两个都没设
z-index，则后写的那个Grid项自然在上面 - 不能依赖“默认z-index是0”，未声明时它不参与
z-index比较，只走源码顺序
Grid + z-index在Flex或绝对定位混合场景下容易出什么问题？
当Grid容器内部混用Flex子容器、或某个子项同时用了position: absolute和z-index，层叠上下文会被意外创建，导致z-index作用范围被截断。
典型表现是：明明设了很高z-index，却还是被兄弟元素遮住，或者被父容器裁切。
- 检查是否有父级设置了
transform、opacity < 1、filter等会触发新层叠上下文的属性 - Grid容器自身如果设了
z-index，且有position，会变成一个独立层叠上下文，其内部z-index只能在这个上下文里比 - 避免在Grid项上同时用
grid-area和top/left等偏移，容易引发定位模式冲突
移动端Safari对Grid层叠的支持有没有坑？
有。iOS 15.4之前的Safari对z-index在Grid子项上的支持不完整，尤其当配合transform动画或will-change时，可能出现层级错乱或闪烁。
这不是代码写错，而是渲染引擎bug，必须降级处理。
- iOS 15.4+基本稳定，但低端机型仍有偶发问题
- 临时方案：对关键覆盖层加
transform: translateZ(0)强制硬件加速（慎用，可能增加内存） - 更稳妥的做法：用
order属性调整DOM顺序替代z-index，适用于静态覆盖场景
z-index本身，而是它和定位、层叠上下文、浏览器兼容性三者咬合时露出的缝隙。调不出来时，先查position，再查父级是否无意中切出了新上下文，最后看是不是撞上了Safari的老bug。 
