position: sticky 失效主因是祖先元素 overflow/transform 或 flex/grid 容器无显式高度导致静默降级为 static；查 computed position 是否为 static 可直接确认，逐层检查祖先 overflow 和高度设置，并用 clip-path 替代 overflow: hidden、确保 -webkit-sticky 在前等方案修复。
绝大多数 position: sticky 失效不是兼容性问题，而是被祖先元素的 overflow、transform 或 flex/grid 容器高度缺失静默降级为 static——你看到的“不动”，是浏览器根本没启动粘性行为。
查 computed position 是不是 static
这是最直接的判断依据。打开 DevTools → 选中目标元素 → 切到「Computed」面板 → 找 position 这一项。如果值是 static（哪怕你在「Styles」里写了 sticky），说明它已被规范强制降级。
- 立刻向上逐层点击左侧 DOM 树中的
parentElement，盯紧每一层的overflow-x和overflow-y计算值 - 重点检查：
.ant-modal外层 wrapper、.card根节点、Tab 面板、Swiper 轮播壳、CSS-in-JS 注入的内联样式 - 临时验证：在可疑祖先上右键 →「Edit as HTML」→ 加
overflow: visible !important，若 sticky 恢复，问题坐实
用 clip-path 替代 overflow: hidden
很多场景下 overflow: hidden 是 UI 必需（比如圆角图片裁剪、弹窗内容不穿出），不能硬删。但它的副作用是创建 BFC，直接切断 sticky 锚定链。
- 把
overflow: hidden改成clip-path: inset(0)，视觉效果完全一致，且对 sticky 零干扰 - 兼容性已覆盖主流环境：Chrome 93+、Firefox 97+、Safari 15.4+、Edge 79+
- IE 不支持
clip-path；如必须兼容 IE，只能重构 DOM 或改用 JS 模拟
flex/grid 父容器必须有显式高度
flex 或 grid 容器默认不产生滚动上下文。当 sticky 元素直接挂在 display: flex 或 display: grid 的子级下，若父容器没设 height、max-height 或至少 min-height: 1px，sticky 的“进入视口”判断就会失准。
- 加
min-height: 1px是最轻量、最可靠的兜底写法 - 禁用
display: inline-flex和display: inline-grid——它们不产生 BFC，sticky 直接被忽略 - 慎用
align-items: stretch或baseline，优先用flex-start，防止顶部基准线偏移导致top: 0失效
iOS Safari 旧版本需要 -webkit-sticky 且顺序不能错
Safari 15.4 及更早（覆盖大量存量设备）不识别 position: sticky，只认 position: -webkit-sticky，而且声明顺序错误会导致整条规则被跳过。
- 必须写成：
position: -webkit-sticky;在前，position: sticky;在后 - 错误写法如
position: sticky; position: -webkit-sticky;—— 后者会被忽略，前者在旧 Safari 中无效 - 注意：Chrome 56+、Firefox 54+、Safari 13.1+、Edge 79+ 均原生支持
sticky，无需前缀；强行加前缀反而可能触发解析失败
真正难处理的不是写法本身，而是嵌套层级中某一层 overflow 或 transform 的存在——它不会报错，不会警告，只会在 computed 值里悄悄变成 static，然后等你花半小时从 DOM 树底部一路点到 html 标签才找到那个藏在第七层的 overflow: auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
