overflow:hidden会让sticky直接退化为static，因浏览器依规范静默降级而非失效；需用DevTools查computed position值，逐级检查overflow，用clip-path:inset(0)替代或加position:relative wrapper修复。
overflow:hidden 会让 sticky 直接退化为 static
不是“没生效”，是浏览器压根没让它进 sticky 流程。只要 sticky 元素任意一层祖先（哪怕隔了三层）的 overflow-x 或 overflow-y 计算值为 hidden、auto 或 scroll，且该祖先自身不滚动（比如高度固定、内容未溢出），sticky 就会被静默降级为 position: static。你在 DevTools 的「Styles」面板里还能看到 position: sticky，但「Computed」面板里 position 的值已经是 static —— 这是规范行为，不是 bug。
为什么 overflow:hidden 会截断 sticky 锚定链
sticky 不锚定视口，而是锚定“最近的、可滚动的块级容器”。overflow: hidden 会创建新的块格式化上下文（BFC）和滚动容器边界，但它本身不可滚动。浏览器判定：这个容器既不滚，也不允许子元素突破它，那 sticky 就没意义，直接禁用。
- 常见藏雷位置：
.ant-modal外层 wrapper、.card根节点、Tab 切换容器、Swiper 轮播壳、CSS-in-JS 动态注入的内联样式 - Flex/Grid 容器若同时带
overflow: hidden，即使只是为清浮动或保圆角，也会连带让 sticky 失效 - 父容器设了
height: 100vh时，内容撑不开，滚动上下文被锁死，sticky 同样无法触发
不删 overflow:hidden 怎么救活 sticky
硬删会破 UI（比如圆角图片穿出、弹窗内容溢出），必须绕过限制：
- 用
clip-path: inset(0)替代overflow: hidden：视觉裁剪效果完全一致，但不创建新 BFC，对 sticky 零干扰；注意别写成clip-path: inset(0px)，旧版 Safari 解析不稳定 - 若必须保留
overflow: auto（如横向滚动表格），给 sticky 元素加一层position: relativewrapper：<div style="overflow: auto"> <div style="position: relative"> <div class="sticky"></div> </div> </div> - 避免把 sticky 元素直接挂在
display: flex或display: grid容器下——它们默认不生成稳定包含块；加min-height: 1px或显式height，并确保align-items不是center或baseline
iOS 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（属性名不存在） - PostCSS 用户需确认
autoprefixer配置目标包含ios_saf，否则不会插前缀 -
@supports (position: sticky)在 Safari 中不可靠，建议用 JS 检测：CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')
最易忽略的是：失效点常不在直接父级，而在爷爷级甚至更高层；DevTools 里看到 position: static 就说明 sticky 没启动，不是渲染延迟，也不是 top 值写错。
