sticky失效主因有五：①写在inline元素上被规范禁止，须改display为block/inline-block；②任意祖先设overflow:hidden/auto/scroll会截断滚动上下文，使sticky退化为static；③父容器为inline-flex/inline-grid不产生BFC，sticky直接被忽略；④父容器用height:100vh而非min-height:100vh，锁死滚动范围；⑤sticky元素未置于可滚动祖先的直系子级位置。
sticky元素写在inline标签上直接被忽略
浏览器规范明确禁止对纯inline元素（如span、a、em）应用position: sticky，它连计算阶段都不会进入，直接降级为static。
常见现象：DevTools里看到声明写了position: sticky和top: 0，但Computed值始终是static，滚动毫无反应。
- 必须显式改写显示类型：
display: block、display: inline-block或display: table均可激活sticky -
inline-block适合需保持行内语义的场景（如导航项），但注意vertical-align可能影响基线，建议统一设vertical-align: top - 避免用
display: flex直接替换inline元素——它会破坏原有流式布局，可能引发意外换行或间距塌陷
任意祖先设置了overflow:hidden/auto/scroll
这是最隐蔽的“静默杀手”：只要sticky元素向上任意一层（哪怕离得很远）的祖先设置了overflow: hidden、auto或scroll，且该祖先不是sticky元素的定位上下文（即没设position: relative等），sticky就会被截断并退化为static。
典型症状：滚动时元素一闪而过，或干脆纹丝不动；Computed面板中position显示为static。
立即学习“前端免费学习笔记（深入）”；
- 用DevTools逐级点开父节点，在Computed里查
overflow的最终计算值，重点盯overflow: hidden - 临时删掉可疑父级的
overflow声明，快速验证是否恢复 - 若必须保留
overflow: auto（如弹窗内列表），加一层position: relativewrapper：<div style="overflow: auto"><div style="position: relative"><div class="sticky"></div></div></div>
父容器是inline-flex或inline-grid
display: inline-flex和display: inline-grid不产生块格式化上下文（BFC），而sticky定位必须依赖BFC作为滚动参考。结果不是“偶尔卡顿”，而是从解析阶段就被浏览器忽略。
常见现象：DevTools里看到position: sticky和top: 0都写了，但Computed中position仍是static。
- 临时验证：给父容器加
display: flex或display: grid（块级变体），看sticky是否立刻生效 - 若业务必须保持“行内表现”，可用
display: inline-flex+vertical-align: top+min-width模拟视觉效果，但sticky元素必须提级到外层display: block容器中 - 更稳妥做法：把sticky元素移到外层
div或section，该容器设display: block且具备滚动能力
父容器用了height: 100vh而非min-height: 100vh
当sticky元素的包含块被设为height: 100vh，它会被强制截断高度，无法随内容自然撑高。结果就是滚动超出视口后，sticky元素因超出包含块边界而失去粘性作用域，退回到文档流定位。
本质问题：sticky只在其包含块的滚动范围内有效；height: 100vh锁死了这个范围。
- 只需将
height: 100vh改为min-height: 100vh，即可允许容器随内容伸展，维持完整粘性作用域 - 确保该容器本身具备滚动能力（如未被其他
overflow规则干扰） - 若容器内使用了
float，还需额外处理浮动塌陷（如加clear: both或改用display: flex）
sticky元素不在可滚动祖先的直系子元素位置
sticky行为绑定的是“最近的可滚动祖先”。如果sticky元素被嵌套在多层非滚动容器中（比如div > div > .sticky），而真正滚动的是最外层#scroll-container，那它的粘性就只会在那个外层容器内部生效——前提是它必须是该容器的**直系子元素**。
错误写法示例：#scroll-container设了overflow-y: scroll，但.sticky-header藏在中间两层div里，结果它根本不会响应容器内的滚动。
- 修正方式：把sticky元素提到
#scroll-container的直接子级位置 - 若结构不能动，可在滚动容器内加一层
position: relativewrapper，并把sticky元素挂在这层下面 - 注意：transform、filter、will-change等属性也会创建新的层叠上下文，间接干扰sticky的定位参考系
overflow和display，再确认它是不是直系子元素、有没有被height: 100vh锁死、父级是不是inline-flex——这几个检查做完，90%的sticky失效都能当场定位。 
