sticky在transform父级下退化为absolute，因transform创建新包含块截断锚定链；需用devtools逐层检查transform值，替代方案包括提升层级、局部滚动模拟或js动态计算。
sticky元素加transform后突然“飘走”了
不是动画没跑完，是sticky的锚定关系被transform直接切断了。只要父级（哪怕隔了好几层）有transform: translateZ(0)、scale(1)、rotate(0deg)，sticky就会从“贴着视口滚动”退化为“贴着那个带transform的父级定位”，视觉上就是位置乱跳、偏移、甚至完全消失。
为什么transform会让sticky失效而不是单纯移动它
因为transform（非none）会强制创建新的包含块（containing block）和层叠上下文（stacking context）。而position: sticky必须依赖“最近的可滚动祖先”作为锚点——这个锚点一旦被transform截断，浏览器就只能把它当成position: absolute来处理，参照系从视口降级为那个变形的父容器。
- 常见伪装写法：
transform: translateZ(0)（硬件加速常用）、filter: blur(0)、opacity: 0.99，全都会触发新包含块 -
filter: opacity(1)是无效语法，浏览器忽略；真正起效的是filter: opacity(.99)，但这就够让sticky挂掉 - 第三方UI库（比如弹窗组件）可能悄悄注入
filter: drop-shadow()，你根本看不到源码里写了啥
怎么快速定位是哪一层transform在捣鬼
别猜，用DevTools逐层查Computed样式：
- 选中失效的sticky元素，在Styles面板切到「Computed」标签
- 往上逐层点击
parentElement，每层都看transform是否为none - 临时加
transform: none !important到某层父级，如果sticky立刻恢复，问题就锁定了 - 特别注意爷爷级组件、CSS-in-JS动态注入的样式，它们可能只在Modal打开时才激活
不能删transform时的三个实操替代方案
有些场景transform不能动（比如3D翻转、动画、性能优化），那就绕开它：
- 把sticky元素提到更高层级，比如用JS挂到
document.body下，用position: fixed模拟，但得手动监听resize和orientationchange - 改用局部滚动容器：给父容器设
overflow-y: auto，sticky元素内加top: -100vh+overflow-anchor: none，让它在局部范围内生效 - 用JS动态计算：监听
scroll事件，调用getBoundingClientRect()算出应处的top值，注意用requestIdleCallback或节流防抖
最隐蔽的问题往往不在你写的CSS里，而在某个没暴露的爷爷级组件中——动手前，先用DevTools的「Layout」面板确认当前滚动容器到底是谁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
