position: sticky 不生效，八成是祖先元素的 overflow 属性（hidden/auto/scroll）创建了新的滚动上下文，导致 sticky 锚定失败；需逐级检查 overflow 设置，优先用 clip-path 替代 overflow: hidden，ios 需加 -webkit-sticky 前缀并确保显式声明 top/bottom 等偏移值。
position: sticky 不生效，八成是某个祖先元素的 overflow: hidden、overflow: auto 或 overflow: scroll 在静默拦截——不是样式写错了，是滚动上下文被截断了。
为什么 overflow: hidden 会让 position: sticky 完全退化为 static
sticky 必须锚定在一个“可滚动的包含块”上才能触发。一旦任意祖先（不一定是直接父级）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，浏览器就会把它当作 sticky 的最近滚动容器——但如果这个容器本身不滚动（比如高度固定、内容没溢出），sticky 就找不到触发条件，直接被降级为 position: static。
常见现象：top: 0 写了，DevTools 里也显示声明存在，但 computed position 是 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 时怎么救活 sticky
业务上常需要 overflow: hidden 来裁剪圆角图片、防止弹窗内容穿出、或配合动画效果，不能简单删除。这时得绕过规范限制，而不是硬改 DOM。
- 优先用
clip-path: inset(0)替代overflow: hidden：视觉裁剪效果一致，但不创建新块格式化上下文（BFC），sticky 链保持完整 - 若必须用
overflow: auto（如内部有横向滚动表格），把 sticky 元素提一层：在该容器外加一个position: relative的 wrapper，再把 sticky 元素挂进去 - 极端情况（DOM 锁死、无法调整结构），可用
position: fixed+getBoundingClientRect()监听scroll模拟，但要注意 iOS Safari 滚动抖动和节流处理
为什么 overflow: auto 和 overflow: scroll 也常导致 sticky 卡住
它们虽能滚动，但 sticky 行为会被绑定在该容器内部。如果内容没真正溢出（比如高度刚好、子项被 height: 100% 压扁），浏览器可能判定“不可滚动”，sticky 就不会触发；更糟的是，它仍把这层当边界，结果元素卡在顶部不动，或滚动一段后突然掉回文档流。
- 用 DevTools Layout 面板看该容器的 “Actual height” 是否真大于设定高度
- 给它加
max-height并确保子内容撑高，或显式写overflow-y: auto - 避免用
height: 100vh作 sticky 父容器高度——它会硬性截断滚动范围，应改用min-height: 100vh - Flex/Grid 容器若设了
flex: 1，要确认它的父级给了明确高度约束（比如height: 100vh），否则不会触发滚动上下文
iOS Safari 下 sticky 失效的额外陷阱
Safari 对 sticky 的“粘性边界”判定比 Chrome 更严格，且不报错，只会静默降级为 static。除了 overflow 干扰，还要检查：
- 必须补
position: -webkit-sticky前缀，iOS 15.4 之前不加就完全不识别 - sticky 元素自身必须显式设置
top、bottom、left或right中至少一个；top: auto或不写 = 失效 - 避免把 sticky 元素放在
display: inline-flex或display: inline-grid的父级里——inline 级容器不产生 BFC - 慎用
transform、filter、will-change，它们会创建新层叠上下文，让 sticky 锚定错位
最常被忽略的是：overflow 干扰往往藏在第三层甚至第四层祖先上，而不是直接父级；而 Safari 不会提示，只默默关掉 sticky。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
