sticky失效主因是祖先元素overflow:hidden/auto/scroll静默截断滚动上下文，或inline-flex/inline-grid父容器未创建BFC，导致浏览器在计算阶段直接降级为static；需逐级检查Computed overflow值，用clip-path:inset(0)替代overflow:hidden修复。
sticky 失效，几乎从不因为初学者漏写了 top 或写错了语法，而是被某层祖先元素静默“关掉”了——它在计算阶段就被降级为 position: static，连尝试粘一下的机会都没有。
为什么 DevTools 显示 position: sticky 却完全不动？
浏览器在样式计算阶段就决定是否启用 sticky 行为。只要 sticky 元素的任意祖先（哪怕隔了三层）满足以下任一条件，它就会被强制设为 static：
-
overflow: hidden、overflow: auto或overflow: scroll，且该祖先自身未形成实际滚动（比如高度固定、内容没撑开） -
display: inline-flex或display: inline-grid—— 它们不创建块格式化上下文（BFC），sticky 规范直接忽略 - 父容器是
flex或grid，但没显式声明flex-direction: column、没设max-height、或用了align-items: center等干扰基线判定的属性
验证方法：选中 sticky 元素 → 打开「Computed」面板 → 看 position 值是不是 static；如果是，说明已被截断，不是渲染问题。
怎样快速定位是哪一层祖先在“卡住” sticky？
必须逐级向上检查，不能只盯直接父级。操作步骤很直接：
- 在 DevTools 中选中 sticky 元素，点击右侧「parentElement」链接，一层层往上点，直到
- 每点一层，都盯紧「Computed」面板里的
overflow-x和overflow-y计算值 - 重点排查这些常见“藏雷”位置：
.ant-modal-body、.van-card、微信小程序的scroll-view、Swiper 的 wrapper、CSS-in-JS 动态注入的内联overflow: hidden - 临时给某层加
overflow: visible !important，如果 sticky 立刻恢复，问题就锁定了
不删 overflow: hidden 怎么让 sticky 继续工作？
很多场景下裁剪是刚需（圆角卡片、弹窗防穿出），硬删会破 UI。替代方案更稳妥：
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果完全一致，但不创建新 BFC，sticky 链保持完整（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把 sticky 元素提一层：在带
overflow的容器外，套一个position: relative的 wrapper，再把 sticky 元素挂进去 - 若必须保留在局部滚动容器内，确保其直接父级设了
max-height+overflow-y: auto+flex-direction: column+align-items: flex-start
真正容易被忽略的是：height: 100vh 会彻底废掉 sticky，因为它锁死了容器高度，浏览器判定“不可滚动”。改用 min-height: 100vh，并确保外层没有 transform 或 filter 创建新层叠上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
