sticky元素computed值为static，因祖先overflow触发降级；需检查各层overflow-x/y、flex/grid父容器高度、safari的-webkit-sticky顺序及自身transform/filter干扰。
sticky元素computed值是static，先查祖先overflow
只要任意祖先设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器本身不滚动（比如高度刚好、内容未溢出），浏览器就会静默把 position: sticky 降级为 position: static。你看到的“不动”，不是卡住，是压根没启动。
用 DevTools 选中 sticky 元素 → 切到「Computed」面板 → 看 position 值是不是 static；接着逐级点击左侧 DOM 树中的 parentElement，盯紧每层的 overflow-x 和 overflow-y 计算值。
- 重点排查：
.ant-modal外层 wrapper、.card根节点、Tab 切换容器、Swiper 轮播壳、CSS-in-JS 动态注入的内联样式 - 临时验证：在 DevTools 中给某层祖先加
overflow: visible !important，如果 sticky 立刻恢复，问题就坐实了 - 别只查直接父级——爷爷级甚至更高层的
overflow也可能在起作用
必须保留overflow: hidden时，用clip-path替代
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 模拟
父容器是flex/grid时，补高度+禁inline
Flex 或 Grid 容器本身不自动产生滚动上下文。当 sticky 元素直接挂在 display: flex 或 display: grid 子级下，若父容器没设高度约束、或用了 align-items: center 等对齐方式，sticky 的“进入视口”判断就会失准。
- 给 flex/grid 父容器加
min-height: 1px或显式height/max-height，强制生成包含块 - 避免
display: inline-flex和display: inline-grid—— 它们不产生 BFC，sticky 直接被忽略 - 慎用
align-items: stretch或baseline，优先用flex-start，防止顶部基准线偏移导致top: 0失效
Safari 下失效，-webkit-sticky顺序不能错
iOS Safari 15.4 及更早版本（覆盖大量存量设备）完全不识别 position: sticky，只认 position: -webkit-sticky，而且声明顺序写错会导致整条规则被跳过。
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 错误写法如
position: sticky; position: -webkit-sticky;或-webkit-position: sticky（属性名不存在）都会让旧版 Safari 忽略整行 - 若用 PostCSS，确认
autoprefixer配置目标包含ios_saf；@supports (position: sticky)不可靠，改用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')
真正容易被忽略的是：sticky 元素自身如果加了 transform、filter 或 will-change，也会中断粘性链——哪怕只写了 transform: translateZ(0) 这种“硬件加速”小技巧，它就在暗处把 sticky 给废了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
