CSS sticky定位失效的五个常见原因是：①写在inline元素上被规范禁止，须改display为block/inline-block；②任意祖先设overflow:hidden/auto/scroll会截断滚动上下文，使sticky退化为static；③父容器为inline-flex/inline-grid不产生BFC，sticky直接被忽略；④父容器用height:100vh而非min-height:100vh，锁死滚动范围；⑤sticky元素未置于可滚动祖先的直系子级位置。
它大概率没生效，不是因为你写错了 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
为什么父容器用了 display: inline-flex 就完全不 work？
因为 display: inline-flex 和 display: inline-grid 不产生块格式化上下文（BFC），而 sticky 定位必须依赖 BFC 作为滚动参考边界。它不是“偶尔卡顿”，是直接被忽略。
- 临时验证：把父容器改成
display: flex或display: grid，sticky 通常立刻恢复 - 如果业务上必须保持行内表现（比如导航项并排），不要强行在
inline-flex里塞 sticky 元素；稳妥做法是把 sticky 元素提级到外层display: block容器中 - 别用
display: flex直接替换span——它会破坏原有流式布局，可能引发换行或间距塌陷
为什么 height: 100vh 会让 sticky 滚一半就掉？
height: 100vh 强制截断了包含块的高度，导致 sticky 的作用域被锁死在视口高度内。一旦内容撑高，超出部分就不再属于 sticky 的“可滚动范围”。
立即学习“前端免费学习笔记（深入）”；
- 现象：滚动到页面中部，sticky 元素突然回到文档流位置，像被“弹”回去了
- 解决方式很简单：把
height: 100vh改成min-height: 100vh，让容器既能保证最小高度，又能随内容自然扩展 - 如果父容器是 flex 或 grid 布局，还要检查是否漏写了
flex: 1或grid-template-rows: auto 1fr这类高度分配规则，否则子容器可能根本没滚动空间
真正麻烦的不是怎么写 sticky，而是它依赖一整条 DOM 链上的多个隐性条件：祖先不能截断滚动上下文、父容器得产生 BFC、自身得是块级盒、包含块得有真实滚动空间——任何一个环节断了，它就安静地变成 static，连 warning 都不报。
