sticky元素computed position是static，因祖先overflow:hidden/auto/scroll创建新包含块且容器不可滚动，导致sticky降级；可用clip-path:inset(0)替代overflow:hidden，或确保父容器有实际滚动空间及bfc。
sticky元素computed position是static？先查祖先overflow值
只要任意祖先元素设置了overflow: hidden、overflow: auto或overflow: scroll，且该容器本身不滚动（比如高度固定、内容未溢出），浏览器就会静默把position: sticky降级为static——你看到的“不动”，不是卡住，是压根没启动。
- 用DevTools选中sticky元素，逐级点开
parentElement直到body，挨个看Computed面板里的overflow-x和overflow-y - 重点盯防：
.ant-modal外层wrapper、.card根节点、Tab切换容器、Swiper壳、甚至CSS-in-JS注入的隐藏样式 - 临时验证：给某层父级加
overflow: visible !important，如果sticky立刻恢复，问题就坐实了
必须保留overflow: hidden怎么办？用clip-path替代
overflow: hidden常用于裁剪圆角图片、防止弹窗内容穿出、避免动画溢出，不能硬删。但clip-path: inset(0)能实现完全一致的视觉裁剪效果，且不创建新包含块、不切断滚动上下文、对sticky零干扰。
- 替换写法：
overflow: hidden→clip-path: inset(0) - 兼容性：Chrome 55+、Firefox 54+、Safari 15.4+、Edge 79+，2026年已全覆盖
- 注意：
clip-path不支持IE，如需兼容IE，只能重构DOM结构或改用JS模拟
overflow: auto/scroll也失效？检查它是否真能滚动
overflow: auto和overflow: scroll会主动创建滚动容器，但sticky只在“内容实际溢出”的容器里生效。如果子内容被height: 100%压扁、或容器高度刚好填满内容，浏览器判定“不可滚动”，sticky就退化为static，同时仍把它当粘性边界——结果就是元素卡在顶部不动，或滚动一段后突然掉回文档流。
- 用DevTools Layout面板查看该容器的
Actual height是否大于设定高度 - 确保它有可滚动空间：加
max-height: 600px并让子内容撑高，或显式写overflow-y: auto - 别用
height: 100vh作为sticky父容器高度——它会硬性截断滚动范围；改用min-height: 100vh
flex/grid父容器里sticky不工作？补高度+禁inline
Flex或Grid容器本身不自动产生滚动上下文。当sticky元素直接放在display: flex或grid子级时，若父容器没设高度约束、或用了align-items: center等对齐方式，sticky的“进入视口”判断就会失准；更糟的是，inline-flex或inline-grid父级根本不产生块格式化上下文（BFC），sticky直接被忽略。
- 给flex/grid父容器加
min-height: 1px或height: 0，强制它生成包含块 - 避免
display: inline-flex和display: inline-grid——它们是sticky的硬性禁区 - Safari 15.4之前对flex内sticky支持极弱；如需兼容，把sticky元素提到更高层级的
block容器中
overflow: hidden——它可能来自框架注入、动态class、甚至内联样式，DevTools里不点开根本看不到。而Safari对这类干扰最敏感，不报错，只静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
