position: sticky 失效主因是祖先元素的 overflow 或 transform 拦截，或 flex/grid 容器未创建 bfc；需逐级检查 overflow 值，用 clip-path 替代 overflow: hidden，父容器设 align-items: start 并确保有滚动空间。
它不是不支持，而是被某个祖先元素的 overflow 或 transform 静默拦截了——position: sticky 一旦失效，DevTools 里显示的 position 计算值就是 static，连 top 都不会参与计算。
DevTools 里 computed position 是 static，先查所有祖先的 overflow
这不是你漏写了 top: 0，而是浏览器在解析时直接跳过了 sticky 逻辑。只要任意祖先（从 sticky 元素自身向上直到 body）的 overflow-x 或 overflow-y 计算值是 hidden、auto、scroll 或 clip，sticky 就会退化为 static。
- 重点排查：
.ant-modal外层 wrapper、.card根节点、Tab 切换容器、Swiper 轮播壳、CSS-in-JS 动态注入的内联样式 - 用 DevTools 选中 sticky 元素 → 打开「Computed」面板 → 点左侧 DOM 树逐级往上点 parent，盯紧每层的
overflow-x和overflow-y - 临时验证：给某层祖先加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了 - 别只查直接父级——爷爷级甚至更高层的
overflow也可能在起作用
必须保留 overflow: hidden？用 clip-path 替代
overflow: hidden 常用于裁剪圆角图片、防止弹窗内容穿出、配合动画效果，不能硬删。但 clip-path: inset(0) 能实现一模一样的视觉裁剪效果，且不创建新 BFC、不切断滚动上下文、对 sticky 零干扰。
- 替换写法：
overflow: hidden→clip-path: inset(0) - 兼容性已全覆盖（Chrome 55+、Firefox 54+、Safari 15.4+、Edge 79+），2026 年无需顾虑
- 注意：
clip-path不支持 IE；如需兼容 IE，只能重构 DOM 或改用 JS 模拟
父容器是 flex/grid 或 inline 容器时的隐藏陷阱
position: sticky 要求一个块格式化上下文（BFC）作为锚点，而某些布局模式会静默破坏它：
-
display: inline-flex或display: inline-grid不产生 BFC，sticky 直接被忽略——哪怕top: 0写得再对也没用 - flex 容器设了
align-items: center或baseline，会拉偏 sticky 元素的“顶部基准线”，导致top: 0实际失效 - 父容器没设高度约束（如缺
min-height: 100vh），整个链路无滚动空间，sticky 无从谈起 - 浮动元素（
float: left）导致父容器高度塌陷，sticky 元素的包含块计算异常
iOS Safari 下 sticky 不触发或闪退
iOS Safari（尤其是 15.4 之前）对 position: sticky 的实现有特殊限制：
- 当父容器使用
display: flex或display: grid，且未显式设置align-items/justify-items时，sticky 可能完全静默 - 最可靠解法是加一行
align-items: start（或flex-start）到父 flex 容器，并确认父容器本身没被overflow截断 - 避免在 sticky 元素上同时使用
backdrop-filter和box-shadow；iOS 渲染管线对混合效果支持不稳定 - 真机测试必须做——模拟器无法复现 iOS 的合成层调度问题
真正容易被忽略的是：sticky 的生效范围由其**最近可滚动祖先的高度和内容溢出状态共同决定**，而不是单纯看 top 值。哪怕所有样式都写对了，如果那个祖先容器因为 height: 100vh 或 max-height 被锁死、内容又没撑高，它就根本不会滚动——sticky 自然也就没有机会触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
