sticky不粘主因是祖先overflow:hidden/auto/scroll静默降级为static，需逐级检查Computed中overflow值，用clip-path:inset(0)替代或提升DOM层级修复。
sticky元素不粘，90%不是写错了，而是被某层祖先“静默拦截”了——它根本没进入粘性计算流程，Computed里position直接显示static。
检查所有祖先的overflow值
浏览器只要在sticky元素向上路径中发现任意一层祖先设置了overflow: hidden、overflow: auto或overflow: scroll，且该祖先**没设position: relative/absolute/fixed/sticky**（即不是定位上下文），就会立刻把它降级为static。
- 用DevTools逐级点击父节点，在
Computed面板查overflow最终值，别只看Styles里写的那行 - 重点盯
overflow: hidden——它最常出现在CSS框架组件里：.ant-modal、.card、.swiper-wrapper、Tab容器壳 - 如果必须保留
overflow: auto（比如弹窗内列表），加一层position: relativewrapper：<div style="overflow: auto"> <div style="position: relative"> <div class="sticky"></div> </div> </div> -
overflow: clip同样触发该限制，虽少见但需留意
确认sticky元素有合法的“滚动容器”
sticky不锚定视口，只在**最近的、可滚动的块级包含块**内生效。这个容器必须：有高度（不能塌陷）、内容能撑开它、自身能产生滚动行为。
- 父容器写了
height: 100vh？换成min-height: 100vh——否则容器高度被锁死，无滚动上下文，sticky直接不触发 - 父容器用了
display: inline-flex或display: inline-grid？它们不产生BFC，sticky会被忽略；改用flex或grid - 父容器里有
float: left导致高度塌陷？用clear: both或改用flex布局修复 - sticky元素是
span、a这类inline元素？必须加display: block或display: inline-block，规范禁止对纯inline元素应用sticky
验证基础条件是否满足
哪怕祖先都正常，下面几条缺一不可：
- 必须显式设置
top、bottom、left或right中至少一个——没设就等同于relative，不会“粘” -
top和bottom同时设时，top优先；left和right同时设时，left优先 - sticky元素自身不能是
float、position: absolute、position: fixed或display: table-caption - Firefox对
display: table-row等表格相关值支持不稳定，慎用
最容易被忽略的是：失效点往往不在直接父级，而在爷爷级甚至更高层；Computed里position: static不是样式没生效，是浏览器压根没让它进sticky逻辑——所以别盯着元素本身调，要顺着DOM往上摸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
