position: sticky; 不生效主因是父容器 overflow 设为 hidden、auto、scroll 或被 transform、filter 等属性创建新包含块，导致粘性失效；需移除干扰样式、确保正确偏移（如 top: 0）并置于正常滚动上下文中。
当使用 CSS 的 position: sticky; 时，元素在滚动容器中不生效，最常见的原因是父级容器的 overflow 属性设置不当。sticky 定位依赖于正常的文档流和滚动上下文，一旦被某些 overflow 值“阻断”，粘性效果就会失效。
确保父容器没有阻碍 sticky 的 overflow 设置
position: sticky; 要求其最近的具有滚动机制的祖先容器不能将 overflow 设置为 hidden、auto 或 scroll，否则会破坏粘性行为的触发条件。
- 父容器设置了
overflow: hidden - 父容器设置了
overflow: auto或scroll，且该容器是实际滚动的元素 - sticky 元素被包裹在带有
transform、filter或will-change的层中
要修复这个问题，可以尝试：
- 移除父容器的
overflow: hidden | auto | scroll，改用其他方式控制布局 - 如果必须保留
overflow，考虑将 sticky 元素移出该容器，或调整 DOM 结构使其脱离受影响的剪裁上下文 - 确保 sticky 元素的祖先链中没有创建新的层叠上下文或包含块来干扰定位
正确设置 sticky 基本样式
除了 overflow，sticky 元素本身还需要正确设置偏移量才能生效。
立即学习“前端免费学习笔记（深入）”；
- 必须声明
position: sticky; - 必须指定一个偏移值，如
top: 0;、bottom: 10px;等 - 常见写法：
top: 0;表示滚动到顶部时开始粘住
.sticky-element {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
检查是否被 transform 或 filter 影响
如果 sticky 元素或其任意祖先应用了 transform（如 scale、translate）、filter（如 blur()）或 will-change，浏览器会创建新的包含块，导致 sticky 相对于错误的容器计算位置。
- 避免在 sticky 元素的父级使用
transform: translateX(0);等“隐形优化” - 检查是否有第三方库或框架自动添加了这些属性
- 临时移除这些样式测试 sticky 是否恢复
确认滚动容器是视口或正常文档流
如果整个页面滚动，sticky 应作用于 流中；如果是局部容器滚动，则 sticky 元素必须位于该容器内，并且容器不能有上述问题。
- 局部滚动容器应避免
overflow: hidden阻断 sticky - 可尝试将容器设为
overflow-y: scroll并确保其高度固定，同时不破坏 sticky 上下文
基本上就这些。sticky 不生效多数是被 overflow 或包含块异常“静默拦截”了。检查结构、移除可疑样式，逐步排查就能解决。
