sticky元素被兄弟元素遮盖的直接原因是其父容器未创建层叠上下文，导致z-index无效；必须给其直接父容器添加transform: translateZ(0)或will-change: transform来建立层叠上下文。
sticky元素被兄弟元素盖住的直接原因
不是position: sticky本身失效，而是它仍属于普通文档流，z-index默认为auto，不参与层叠上下文比较。当兄弟元素有显式z-index（哪怕只是1），且父容器没创建新层叠上下文时，sticky元素就会被压在下面。
必须给sticky元素的父容器加transform或will-change
只设z-index没用——sticky元素的层叠等级由其最近的**层叠上下文容器**决定。常见错误是直接给sticky元素设z-index: 10，但它的父级没层叠上下文，该值被忽略。
- 最稳妥做法：给sticky元素的直接父容器加
transform: translateZ(0)或will-change: transform - 避免用
opacity: 0.99或filter: blur(0)，它们副作用大（重绘开销、模糊字体） - 如果父容器已是定位元素（如
position: relative），且没其他层叠上下文干扰，可直接设z-index，但需确认它没被更外层的z-index压制
兄弟元素的z-index值不能「看起来够大」就行
层叠顺序不是数值大小战。比如兄弟div设了z-index: 999，而sticky父容器没层叠上下文，那999就完全无效——因为sticky元素和它根本不在同一比较维度里。
- 检查浏览器开发者工具的「Layers」面板，确认sticky元素是否真的生成了独立图层
- 用
getComputedStyle(el).zIndex查实际生效值，常会返回auto，说明z-index没起作用 - 若兄弟元素是fixed或absolute，优先确保它的父容器没意外创建层叠上下文（比如带
z-index的relative父级）
移动端iOS Safari的sticky兼容性陷阱
iOS 15.4之前，position: sticky在overflow-scroll容器里表现异常，且z-index行为和桌面端不一致。即使配置正确，也可能被同级flex item遮挡。
立即学习“前端免费学习笔记（深入）”；
- 强制触发硬件加速：
backface-visibility: hidden加在sticky元素自身上（比父容器更可靠） - 避免在sticky元素上同时用
transform和z-index，Safari可能忽略后者 - 真机测试不可省：模拟器常显示正常，但iPhone上滚动瞬间仍可能闪现遮挡
z-index不是开关，是层叠上下文里的相对坐标。没上下文，再大的数字也落不到画布上。
