position: sticky失效主因是祖先元素overflow:hidden/auto/scroll截断滚动上下文或容器高度受限（如height:100vh），导致浏览器静默降级为static；需逐级检查computed overflow、改用min-height替代height、用clip-path:inset(0)替代overflow:hidden。
它大概率没生效，不是因为你写错了 top，而是浏览器压根没让它进入 sticky 计算流程——position: sticky 是个“条件触发器”，缺一个前提就直接退化为 static。
DevTools 里显示 position: sticky 但 computed 是 static
这是最典型的静默失效。浏览器在解析阶段就否决了 sticky 行为，根本不会进入滚动判断逻辑。
- 最常见的原因是某个祖先元素设置了
overflow: hidden、overflow: auto或overflow: scroll——哪怕离你写的 sticky 元素隔了三层 DOM，只要它没滚动（比如高度刚好、内容没溢出），sticky 就会被锁死在这个容器里，降级为static - 另一个高频原因是 sticky 元素本身是
span、a、em这类默认display: inline的元素；规范明确禁止对纯 inline 元素使用 sticky，它连样式计算都不会走那条路径 - 用 DevTools 点开 sticky 元素的每个父节点，在 Computed 面板里挨个查
overflow-x和overflow-y的最终值，重点盯overflow: hidden
父容器用了 height: 100vh 却不生效
height: 100vh 强制截断了包含块的高度，导致 sticky 的作用域被锁死在视口高度内。一旦内容撑高，超出部分就不再属于 sticky 的“可滚动范围”。
- 现象：滚动到页面中部，sticky 元素突然回到文档流位置，像被“弹”回去了
- 解决方式很简单：把
height: 100vh改成min-height: 100vh，让容器既能保证最小高度，又能随内容自然扩展 - 如果父容器是 flex 或 grid 布局，还要检查是否漏写了
flex: 1或grid-template-rows: auto 1fr这类高度分配规则，否则子容器可能根本没滚动空间
父容器是 inline-flex 或 inline-grid
display: inline-flex 和 display: inline-grid 不产生块格式化上下文（BFC），而 sticky 定位必须依赖 BFC 作为滚动参考边界。它不是“偶尔卡顿”，是直接被忽略。
- 临时验证：给父容器加
display: flex或display: grid（块级变体），看 sticky 是否立刻恢复 - 若业务上必须保持行内表现（比如导航项并排），不要强行在
inline-flex容器中改display: block—— 它会破坏原有流式布局，可能引发换行或间距塌陷 - 更稳妥的做法是把 sticky 元素提一层：在外层套一个
position: relative的 wrapper，再把 sticky 元素挂进去
iOS Safari 中局部滚动容器里 sticky 完全不工作
iOS Safari 要求 sticky 必须锚定在“真正可滚动”的容器上，而很多局部滚动容器（比如弹窗里的 scroll-view、卡片内 div）只是声明了 overflow: auto，但内容没撑高、实际不可滚动，浏览器就直接把它当普通块处理，position: sticky 退化为 static。
- 别只查直接父级：微信小程序的
scroll-view、Ant Design 的.ant-modal-body、Swiper 的壳，都可能悄悄加了overflow: hidden - 给 flex 父容器加
flex-direction: column+overflow-y: auto（不是overflow: auto），并显式设max-height（如max-height: 500px），不能只靠min-height: 100vh - 慎用
transform、filter、will-change——它们会创建新层叠上下文，让 sticky 参考系变成变换后的容器，而不是视口
真正难调试的从来不是“怎么写”，而是“为什么没进计算流程”。sticky 的失效往往发生在样式解析早期，等你看到滚动行为异常时，问题早已固化在 DOM 结构和祖先容器的渲染属性里了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
