transform非none（如translateZ(0)）会隐式创建层叠上下文，使子元素z-index仅在内部生效，无法与外部元素比较层级；应避免滥用transform强制加速，改用will-change并及时清除，或提升目标元素至同一上下文。
加了 transform 之后 z-index 看似“失效”，不是 bug，是层叠上下文被隐式创建后的正常行为。关键不是调高数值，而是理解层级归属关系。
为什么 transform 会让 z-index “不生效”
只要元素的 transform 值不是 none（哪怕只是 translateZ(0) 或 translateX(0)），它就立刻成为一个新的层叠上下文根节点。此时它的子元素（包括自己）的 z-index 只在该上下文内部起作用，无法和外部同级元素直接比大小。
- 常见错误现象：
position: fixed导航栏被带transform的图片盖住；grid-item设了z-index: 999仍被父容器外的弹窗遮挡 - 容易被忽略的触发点：CSS 动画库、视差滚动组件、甚至为了强制 GPU 加速而加的
transform: translateZ(0) - 性能影响：每个新层叠上下文都可能触发独立渲染层，过多会增加合成开销
如何让 transform 元素正确浮在 sticky/fixed 元素之上
不能只靠给 transform 元素设高 z-index，必须确保它和目标元素处于可比较的层叠层级中——通常意味着把它们拉到同一个层叠上下文里，或提升目标元素的上下文层级。
- 最稳妥做法：给 sticky/fixed 元素显式创建层叠上下文，并设足够高的
z-index，例如position: sticky; z-index: 1000; - 若必须保留 transform 动画，且需覆盖外部元素：把该动画元素移出原有 DOM 结构（用 React Portal / Vue Teleport 或绝对定位模拟），脱离原父级层叠上下文
- 避免“伪修复”：不要给 transform 元素的父容器加
z-index后再设子元素z-index，那只会把它锁死在更小的上下文中
Grid 容器加 transform 后 grid-item 的 z-index 为何无效
grid-container 设置了 transform，它就成为整个网格的层叠上下文边界。所有 grid-item 的 z-index 都只在容器内排序，哪怕值设成 99999，也无法突破容器框体去和 body 下其他兄弟元素比高低。
立即学习“前端免费学习笔记（深入）”；
- 典型场景：带 hover 缩放的卡片列表 + 页面顶部 sticky 导航栏 → 卡片放大时盖住导航栏
- 调试技巧：用浏览器开发者工具的“Layers”面板查看是否生成了独立渲染层，或检查 computed 样式中是否有
stacking context提示 - 替代方案：用
scale()配合will-change: transform替代硬加transform；或改用clip-path+transition实现类似缩放视觉效果，不触发层叠上下文
真正难处理的不是怎么写 CSS，而是当多个 transform、opacity、filter 在不同嵌套层级叠加时，层叠上下文会像俄罗斯套娃一样层层嵌套。这时候光看 z-index 数值毫无意义，得一层层 inspect 元素的 stacking context 起源。
