position: sticky 失效主因是祖先元素的 overflow: hidden/auto/scroll 创建了新滚动上下文，或 height: 100vh 限制了粘性范围，或父容器 display 为 inline/inline-flex 未触发 BFC，需逐级检查 computed styles。
position: sticky 失效，八成不是你漏写了 top，而是某个祖先元素的 overflow: hidden、overflow: auto 或 overflow: scroll 在静默截断滚动上下文——sticky 元素被“锁死”在容器内，浏览器直接把它当成了 position: static。
为什么 overflow: hidden 会让 position: sticky 彻底退化
sticky 不是吸在视口边缘，它必须锚定在一个「可滚动的包含块」上才能触发。而 overflow: hidden（含 auto/scroll）会强制创建新的包含块和滚动上下文边界。只要该祖先自身不滚动（比如高度固定、内容没撑开），浏览器就判定“这里没滚动”，sticky 就不会启动，计算值永远是 static。
- 常见藏雷位置包括：
.ant-modal外层 wrapper、.card根节点、Tab 切换容器、Swiper 轮播壳、甚至 CSS-in-JS 动态注入的内联overflow: hidden - 用 DevTools 选中 sticky 元素 → 打开「Computed」面板 → 看
position是否始终为static - 逐级点击左侧 DOM 树里的
parentElement，直到<body>，盯紧每层的overflow-x和overflow-y计算值 - 临时给可疑节点加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了
为什么 height: 100vh 会导致 sticky 滚动一段后突然消失
当 sticky 元素的最近块级包含块被设为 height: 100vh，它就失去了随内容伸展的能力。浏览器将粘性作用域硬性限制在 100vh 内，一旦滚动超出这个范围，元素就不再满足 top: 0 的生效条件，直接退回文档流。
- 现象：页面内容很长，但 header 滚到约一个视口高度后就“掉下去”了
- 验证方式：在 DevTools 的 Layout 面板中看该父容器的 “Actual height” 是否恒为 viewport 高度，且无溢出滚动条
- 正确解法是改用
min-height: 100vh，允许容器随子内容自然撑高 - 若父容器是 flex/grid，还需确保它有明确的主轴方向（如
flex-direction: column）和高度约束（如max-height），否则 Safari 可能拒绝识别其为可滚动区域
为什么 inline 元素或 inline-flex 父容器会让 sticky 直接被忽略
浏览器规范禁止对纯 inline 元素（如 <span>、<a>）应用 position: sticky；同时，display: inline-flex 和 display: inline-grid 不产生块格式化上下文（BFC），而 sticky 定位必须依赖 BFC 作为滚动参考系。
立即学习“前端免费学习笔记（深入）”；
- 现象：DevTools 中看到声明写了
position: sticky和top: 0，但 computedposition始终是static - 修复方式：给 sticky 元素显式设置
display: block或display: inline-block（后者适合导航项等需保持行内语义的场景） - 若父容器是
inline-flex，不能只改子元素，必须把父容器改为display: flex或加一层position: relativewrapper 提升上下文层级 - 慎用
transform、filter、will-change—— 它们会创建新层叠上下文，让 sticky 参考系变成变换后的容器，而非视口
移动端局部滚动容器里 sticky 完全不响应的根因
iOS Safari 对 sticky 的滚动上下文判定更苛刻：它要求锚定容器必须是「真正可滚动」的，即内容高度 > 容器高度，且容器本身能响应滚动事件。很多局部滚动容器只是声明了 overflow: auto，但内容未实际溢出，Safari 就直接跳过它，不激活 sticky。
- 验证方式：用鼠标滚轮/手指直接对该容器滚动，看是否响应；不响应，说明它根本没形成滚动上下文
- 常见“伪可滚动”容器：微信小程序的
scroll-view、Ant Design 的.ant-modal-body、自定义div加了overflow-y: auto但没设max-height - 绕过方案：用
clip-path: inset(0)替代overflow: hidden（Chrome 93+、Firefox 97+、Safari 15.4+ 支持），视觉裁剪一致，但不切断粘性链 - 极端情况可提级：在带
overflow的容器外再套一层position: relative，把 sticky 元素挂进去，让它脱离干扰层级
最常被忽略的一点是：sticky 的生效与否，不取决于你写了多少行样式，而取决于你向上查了多少层 DOM —— 任何一个祖先的 overflow、display、height 或 transform 都可能成为静默断点。别只盯着 sticky 元素自己改，要像调试 JS 错误一样，一层层往上 inspect computed styles。
