绝大多数 position: sticky 不起作用是因为祖先元素 overflow 为 hidden/auto/scroll 且不滚动，导致被静默降级为 static；需逐级检查 computed overflow 值，用 clip-path 替代 overflow: hidden，ios 需加 -webkit-sticky 且顺序正确。
绝大多数 position: sticky 不起作用，不是因为你漏写了 top，而是浏览器压根没让它进 sticky 流程——Computed 值显示为 static 就是铁证。
检查祖先元素的 overflow 计算值
只要任意一层祖先（哪怕隔了 4 层）的 overflow-x 或 overflow-y 计算值是 hidden、auto 或 scroll，且该容器本身不滚动（比如高度刚好、内容未溢出），sticky 就会被静默降级为 static。
- 重点排查：
.ant-modal外层 wrapper、.card根节点、Tab 切换容器、Swiper 轮播壳、CSS-in-JS 动态注入的内联样式 - 用 DevTools 逐级点开父节点，在「Computed」面板盯紧
overflow-x和overflow-y的最终值 - 临时验证：给可疑父级加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了 - 别只查直接父级——爷爷级甚至更高层的
overflow也可能在起作用
父容器是 flex 或 grid 时必须补高度
display: flex 或 display: grid 容器本身不自动产生滚动上下文。若没设高度约束，或用了 align-items: center 这类对齐方式，sticky 的“进入视口”判断就会失准。
- 给父容器加
min-height: 1px或显式height/max-height，强制生成包含块 - 避免
display: inline-flex和display: inline-grid——它们不产生 BFC，sticky 直接被忽略 - 慎用
align-items: stretch或baseline，优先用flex-start，防止顶部基准线偏移导致top: 0失效 - 若父级是
height: 100vh，改成min-height: 100vh，否则容器无法随内容撑高，滚动上下文被锁死
用 clip-path: inset(0) 替代 overflow: hidden
业务上常需要 overflow: hidden 来裁剪圆角图片、防止弹窗穿出或配合动画收边，硬删会破 UI。但 clip-path: inset(0) 能实现完全一致的视觉裁剪效果，且不创建新 BFC，对 sticky 零干扰。
- 替换写法：
overflow: hidden→clip-path: inset(0) - 兼容性：Chrome 93+、Firefox 97+、Safari 15.4+、Edge 79+，2026 年已全覆盖
- 注意：
clip-path不支持 IE；如需兼容 IE，只能重构 DOM 或改用 JS 模拟 - 若必须保留
overflow: auto（如列表容器），把 sticky 元素提到该容器外，挂到更高层有明确高度且overflow: visible的父元素下
iOS Safari 下必须写 position: -webkit-sticky
iOS Safari 15.4 及更早版本（覆盖大量存量设备）完全不识别 position: sticky，只认 position: -webkit-sticky，而且声明顺序写错会导致整条规则被跳过。
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 错误写法如
position: sticky; position: -webkit-sticky;—— 后者会被忽略 - 别忘了给
-webkit-sticky加上对应方向阈值，比如-webkit-sticky: top;不合法，得写top: 0; - 若元素本身用了
transform、filter或will-change，也会让 sticky 失效，这些属性要谨慎加
真正难的不是写对那几行 CSS，而是在嵌套深、框架多、动态注入频繁的页面里，快速定位哪一层祖先悄悄截断了 sticky 链——它不报错，不警告，只默默把你写的 sticky 当成无效声明处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
