sticky失效是因为祖先元素overflow:hidden/auto/scroll创建新滚动上下文且自身不可滚动，导致浏览器静默降级为static；需用DevTools逐级检查computed overflow值，用clip-path:inset(0)替代或外层包裹position:relative修复。
设置了 overflow: hidden 会让 position: sticky 直接退化为 position: static，不是“粘不住”，是浏览器压根没启动粘性逻辑。
sticky 元素 computed position 变成 static 怎么查
这不是你漏写了 top，而是浏览器已静默降级。打开 DevTools 选中 sticky 元素，在「Computed」面板里直接看 position 的最终值——如果是 static，说明粘性行为根本没启动。
接着逐级点击左侧 DOM 树中的父节点（从元素本身 → parentElement → 一直点到 body），每点一层都盯紧 overflow-x 和 overflow-y 的 computed 值。
- 重点标记出值为
hidden、auto或scroll的节点 - 尤其注意那些高度固定、内容明显没撑开的容器（比如
height: 400px但子项总高才 200px） - 临时验证：在疑似“卡住”的父级上加
overflow: visible !important，如果 sticky 立刻恢复，就锁定了问题层
为什么 overflow: hidden 会让 sticky 彻底失效
sticky 不是吸在视口，它必须锚定在一个“可滚动的包含块”里才能触发。而 overflow: hidden（含 auto/scroll）会强制创建新的包含块和滚动上下文边界。
立即学习“前端免费学习笔记（深入）”；
只要该祖先自身不滚动（比如高度固定、内容没撑开、或被 height: 100vh 截断），浏览器就认为“这里没滚动，sticky 没意义”，直接降级为 position: static。
- 常见藏雷位置包括：
.ant-modal、.card、.tabs-wrapper等 UI 组件外层 wrapper - Swiper 或轮播图根节点
- CSS-in-JS 库动态注入的内联
overflow: hidden（比如防圆角溢出）
不删 overflow: hidden 怎么救活 sticky
业务上常需要 overflow: hidden 来裁剪圆角图片或防止内容穿出卡片，不能硬删。实操路径有三个：
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果一致，但不创建新包含块，sticky完全不受影响（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把
sticky元素提一层：在带overflow的容器外，套一个position: relative的 wrapper，再把sticky元素挂进去 - 若 DOM 结构完全锁死，可用
position: fixed+getBoundingClientRect()监听滚动模拟，但要注意 iOS Safari 滚动抖动和节流处理
最容易被忽略的是：失效层级往往不在直接父级，而在爷爷级甚至更高；overflow: auto 和 overflow: scroll 同样会卡住 sticky，哪怕容器能滚动，只要内容没真正溢出，浏览器也可能判定“不可滚动”。
