sticky元素被导航栏遮挡是因层叠上下文错位导致z-index失效；需确保二者同属一个层叠上下文，通过移除意外触发属性、统一设置z-index并验证生效。
sticky 元素被导航栏盖住的典型表现
页面滚动时，position: sticky 的元素（比如侧边目录、返回顶部按钮）刚进入视口就立刻被固定在顶部的导航栏挡住，文字或图标被遮住一半，甚至完全不可见。这不是浏览器 bug，而是层叠上下文（stacking context）没理清导致的 z-index 失效。
z-index 生效的前提是创建层叠上下文
直接给 sticky 元素加 z-index: 100 往往没用——因为它的父容器没触发层叠上下文，或者导航栏所在容器的层叠上下文层级更高。关键不是“谁的 z-index 数字大”，而是“谁在更上层的层叠上下文中”。
- 导航栏通常有
position: fixed或position: sticky，且父容器可能带transform、opacity、will-change等属性，无意中创建了新的层叠上下文 -
sticky元素必须和导航栏处于同一层叠上下文中，才能用z-index比较高低 - 最稳妥的做法：让导航栏和 sticky 元素的**最近公共祖先**不创建层叠上下文；或者，把两者都放在同一个明确创建了层叠上下文的容器内
快速修复的三步操作
不用重写结构，优先检查并调整这三处：
- 确保导航栏容器没有意外触发层叠上下文：删掉父级的
transform: translateZ(0)、opacity: 0.99、filter: blur(0)等属性 - 给导航栏本身设
z-index: 1000，给 sticky 元素设z-index: 1001（注意：二者必须同属一个 stacking context） - 如果 sticky 元素在某个
section或aside内，而该容器有z-index但没设position，补上position: relative才能让z-index生效
移动端 Safari 的 sticky + z-index 隐形陷阱
iOS 15.4+ 之后，Safari 对 sticky 元素的层叠行为更严格：即使 z-index 数值更大，若 sticky 元素的祖先存在 backface-visibility: hidden 或 perspective，它仍会被固定定位的导航栏压制。
立即学习“前端免费学习笔记（深入）”；
- 临时绕过：给 sticky 元素加
backface-visibility: visible（覆盖继承） - 长期方案：避免在 sticky 元素上方任意层级使用 3D 相关 CSS，尤其不要在
body或html上写transform: translateZ(0) - 验证方式：打开 Safari 开发者工具 → Elements → 选中 sticky 元素 → 查看 Computed 面板里的
z-index是否显示为有效值（而非auto）
z-index: 999999，只要它被包在一个 z-index: 1 且带 transform 的容器里，它就永远压不过外面 z-index: 2 的导航栏。 
