sticky在transform父级下退化为absolute，因transform创建新包含块截断锚定链；需用devtools逐层检查transform值，替代方案包括提升层级、局部滚动模拟或js动态计算。
sticky在transform父级下退化为absolute
只要任意祖先元素设置了非none的transform（哪怕只是transform: translateZ(0)），position: sticky就会失去对视口的锚定能力，退化为相对于该父级的position: absolute。这不是bug，是CSS规范强制行为：transform会创建新的包含块（containing block），而sticky必须依赖“最近的可滚动祖先”作为参考系——这个参考系一旦被transform截断，粘性就失效了。
用DevTools快速定位哪个transform在作祟
别猜，直接查Computed样式：
- 选中失效的sticky元素，在Styles面板点「Computed」标签
- 往上逐层点击
parentElement，每层都看transform值是否为none - 重点关注那些“看似没动”的写法：
transform: scale(1)、transform: rotate(0deg)、transform: translateZ(0)——它们全都会触发新包含块 - 临时加
transform: none !important到某层父级，如果sticky立刻恢复，问题就锁定了
不删transform时的三个实操替代方案
有些场景transform不能动（比如动画、3D翻转、硬件加速优化），那就绕开它：
- 改用
position: sticky+top: -100vh+overflow-anchor: none，再配合父容器显式设overflow-y: auto，让粘性在局部滚动容器内生效 - 监听
scroll事件，用getBoundingClientRect()动态计算元素应处的top值，注意加requestIdleCallback或throttle防抖 - 把sticky元素提到更高层级，比如挂到
body下，用position: fixed模拟，但需手动处理resize和orientationchange事件
filter、opacity、backdrop-filter同样危险
filter（哪怕filter: blur(0)）、opacity小于1、backdrop-filter，只要计算后不是none，一样会创建新包含块，让sticky失效。特别注意：
-
filter: opacity(1)是无效语法，浏览器会忽略；真正起效的是filter: opacity(.99) - 全局重置里写的
* { filter: unset }没用，unset对filter不生效，必须写filter: none - 第三方UI库（如某些弹窗组件）可能悄悄注入
filter: drop-shadow()，影响外层fixed/sticky导航栏
最隐蔽的失效点往往不在你写的代码里，而在某个爷爷级组件的CSS-in-JS注入样式中——它可能只在Modal打开时才激活，且不暴露在源码里。动手前，先用DevTools的「Layout」面板确认当前滚动容器到底是谁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
