position: sticky 元素的 z-index 仅在其父容器创建层叠上下文后才生效；否则即使设为 999 也无效，需用 transform: translatez(0) 等触发父容器层叠上下文。
直接给 position: sticky 元素设 z-index 通常没用——它必须和父容器一起“升层”，否则数值再大也出不了笼子。
为什么只写 z-index: 999 不起作用
sticky 元素默认 z-index: auto，不参与层叠比较；即使你手动加了 z-index: 100，只要它的**直接父容器没创建层叠上下文**，这个值就被忽略。浏览器会把它当作普通流内元素处理，和兄弟元素比层级时完全“失声”。
- 常见错误：在
.sidebar { position: sticky; top: 20px; z-index: 100; }外层套了个.section { opacity: 0.99; }—— 这个opacity就悄悄建了个新层叠上下文，把z-index: 100关在里面了 - 验证方法：用开发者工具选中 sticky 元素，在 Computed 面板查
z-index，如果显示auto，说明你写的值根本没生效 - 注意：
z-index: 0和z-index: auto效果不同——前者会创建层叠上下文，后者不会
必须给父容器加 transform: translateZ(0) 或 will-change: transform
这是让 sticky 元素的 z-index 真正落地的最小必要操作。不是可选项，是前提条件。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
transform: translateZ(0)是最轻量、副作用最小的触发方式，比opacity: 0.99或filter: blur(0)更安全 - 不要加在 sticky 元素自身上（尤其别和
transform同时用），Safari 可能直接忽略z-index - 如果父容器已是
position: relative且没其他干扰属性，可跳过这步，但务必确认它没被更外层的z-index或transform压制
兄弟元素的 z-index 值不能“看起来够大”就行
比如导航栏写了 z-index: 999，sticky 目录写了 z-index: 1000，但两者不在同一层叠上下文里，这 1 就毫无意义。
- 关键判断点：找它们的**最近公共祖先**是否创建了层叠上下文。如果有，就得把整个模块（包括这个祖先）一起提级
- 移动端 iOS Safari 特别敏感：哪怕公共祖先用了
backface-visibility: hidden，sticky 元素也可能被压制，此时得加backface-visibility: visible覆盖继承 - 真机测试不可省——模拟器里正常，iPhone 滚动瞬间可能闪现遮挡，就是层叠上下文没理清
避免在 body 或 html 上滥用 transform 或 will-change
这两个属性一旦加在根节点，会强制整个页面进入一个顶层层叠上下文，所有内部 sticky 元素的 z-index 都只能在这个大笼子里比大小。
- 典型陷阱：
body { will-change: transform; }看似为动画优化，实则让所有 sticky 导航、返回按钮失效 - 替代方案：只对真正需要硬件加速的动画元素单独加
will-change: transform，且用完及时移除 - 复杂点在于：z-index 不是开关，是坐标。没层叠上下文，再大的数字也落不到画布上——它连“Z轴”都还没被分配到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
