z-index在3d动画中基本无效，因浏览器按z轴坐标渲染：启用preserve-3d或3d变换后，z-index被忽略，元素前后关系由translatez等产生的实际z值决定，而非z-index数值。
z-index 在 3D 动画里基本无效，不是你写错了，是浏览器根本不用它——它按 Z 轴坐标渲染，谁离屏幕近谁在前面。
为什么 translateZ(0) 或 transform-style: preserve-3d 后 z-index 不起作用
一旦父容器启用 transform-style: preserve-3d，或子元素用了 translate3d、rotateX、translateZ 等 3D 变换，浏览器就切换到 3D 渲染管线。此时：
-
z-index被忽略，不再参与层叠排序 - 渲染顺序由元素在 Z 轴上的实际位置决定：
translateZ(50px)的元素一定盖在translateZ(20px)上面 - 即使
.child1的z-index: 999，.child2的z-index: 1，只要后者translateZ更大，它就压前者
怎么让 3D 元素按预期前后排列
别调 z-index，改 translateZ 值才是正解：
- 想让 A 盖在 B 上 → 给 A 设更大的
translateZ（比如translateZ(100px)），B 设小一点（比如translateZ(60px)） - 如果所有子元素都用
translateZ，确保它们的父容器有transform-style: preserve-3d，否则 Z 轴偏移不生效 - 避免混用：不要一边写
z-index，一边又加translateZ—— 行为不可预测，DevTools 里z-index可能直接灰显为(not applicable)
遇到 z-index 灰显时怎么快速确认是否进入 3D 上下文
打开 Chrome DevTools，选中元素后看右侧面板：
- 「Computed」里搜
z-index：若显示(not applicable)或文字灰显 → 元素已脱离传统层叠模型 - 「Layout」标签页里查 «Stacking context»：若为
Yes，再看 «Transform 3D» 是否也标为Yes→ 基本坐实是 3D 渲染接管了层级 - 临时删掉父级的
transform-style: preserve-3d或子元素的translateZ，观察z-index是否立刻变黑可读 → 验证最快手段
真正麻烦的不是调不对数字，而是没意识到自己已经不在二维层叠规则里了——3D 场景下，z-index 就像给飞机装汽车档位，方向错了，油门踩再狠也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
