position: sticky失效主因是祖先元素overflow:hidden/auto/scroll静默截断滚动上下文，或父容器为inline-flex/inline-grid、sticky元素为inline元素、height:100vh锁死高度、未置于可滚动祖先直系子级；需逐级检查Computed overflow与display，用clip-path:inset(0)替代overflow:hidden修复。
绝大多数 position: sticky 失效，不是写错了 top，而是浏览器压根没让它进入 sticky 计算流程——它被某层祖先“静默拦截”了，最终计算值直接是 static。
为什么 DevTools 里写了 sticky 却显示 computed 是 static
这不是渲染失败，是解析阶段就被否决。浏览器检查到某个祖先触发了规范中的“sticky 禁用条件”，就跳过整个 sticky 行为逻辑，连滚动监听都不会注册。
- 任意祖先（哪怕隔了 4 层）的
overflow-x或overflow-y计算值是hidden、auto或scroll，且该祖先自身未形成实际滚动（比如内容没溢出、高度固定），sticky 就会被强制降级 -
display: inline-flex或display: inline-grid的父容器不创建 BFC，sticky 被规范直接忽略，不是兼容性问题，是标准行为 - sticky 元素本身是
span、a等默认display: inline的元素，规范禁止对其使用 sticky，样式计算阶段就跳过 - 父容器设了
height: 100vh，锁死包含块高度，导致粘性作用域被截断，超出部分不再属于“可滚动范围”
如何快速定位哪个祖先在“卡住” sticky
用 DevTools 逐级向上点开 sticky 元素的父节点，在「Computed」面板紧盯两件事：
- 每层的
overflow-x和overflow-y最终计算值，重点找hidden、auto、scroll - 每层的
display值，确认有没有inline-flex或inline-grid - 临时给可疑节点加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了 - 别漏查 CSS-in-JS 注入的内联样式、UI 框架 wrapper（如
.ant-modal-body、.tw-overflow-hidden、scroll-view）
不删 overflow:hidden 怎么让 sticky 继续工作
业务上常需要 overflow: hidden 来裁剪圆角图片或防止弹窗穿出，硬删会破样式。替代方案更稳妥：
立即学习“前端免费学习笔记（深入）”；
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果一致，但不创建新 BFC，sticky 链保持完整（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把 sticky 元素提一层：在带
overflow的容器外，套一个position: relative的 wrapper，再把 sticky 元素挂进去 - 若必须保留
overflow: auto（如列表容器），确保它的直接父级设了max-height+overflow-y: auto，并显式声明主轴方向（flex-direction: column）和对齐方式（align-items: flex-start）
iOS Safari 下 sticky 仍不生效的额外要点
旧版 iOS Safari（15.4 及更早）完全不识别 position: sticky，只认 position: -webkit-sticky，而且顺序写错会导致整条规则被跳过：
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 错误写法如
position: sticky; position: -webkit-sticky;或-webkit-position: sticky（属性名不存在）都会被忽略 - 若用 PostCSS，确认 autoprefixer 配置目标包含
ios_saf - 别依赖
@supports (position: sticky)，改用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')
真正难排查的，往往是多个因素叠加：比如某层用了 overflow: hidden，同时父容器又是 display: grid 且 grid-template-rows 用了 auto，导致浏览器既找不到有效滚动上下文，又无法确定粘性锚点——这时候 DevTools 里可能连 position: static 都不显示，只看到元素无声无息地滚走了。
