position: sticky 失效主因是祖先元素 overflow 属性强制禁用，或未设置 top/bottom/left/right、父容器为 flex/grid 且未触发滚动上下文，iOS Safari 存兼容问题。
sticky不生效，八成是父容器overflow在捣鬼
只要任意祖先元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且它本身不滚动（比如高度固定、内容没溢出），position: sticky 就会直接退化为 static —— DevTools 里看到的计算后 position 值就是 static，不是“没生效”，是被强制禁用了。
常见藏雷位置：
- 模态框（
Modal）外层 wrapper，默认加了overflow: hidden防内容穿出 - 卡片（
Card）或 Tab 切换容器，用overflow: hidden裁圆角或防动画溢出 - 轮播图（
Swiper）、瀑布流组件的根节点，CSS-in-JS 注入了隐藏滚动条的样式
修复方法很简单：临时删掉可疑祖先的 overflow 声明，看 sticky 是否恢复；若必须保留裁剪效果，改用 clip-path: inset(0) 替代 —— 它不影响包含块和粘性行为。
top/bottom/left/right 缺一个都不行
position: sticky 不是设了就粘，它必须知道“粘在哪”。没写 top: 0，浏览器就当它是普通流内元素处理，连判断逻辑都不会触发。
立即学习“前端免费学习笔记（深入）”；
注意点：
-
top: 0和top: 1px效果一致，但top: auto或完全不写 = 失效 - 如果导航栏本身有
margin-top: 20px，粘住起始点会从视口顶部往下偏移 20px，建议改用padding-top留白 - 在表格中给
th或td加right: 0，必须确保table自身有横向滚动上下文（比如display: block; overflow-x: auto），否则 sticky 会一路往上找，最终锚定到 body 边界，位置完全错乱
flex/grid 容器里要小心对齐和高度
当 sticky 元素的直接父级是 display: flex 或 display: grid 时，它可能无法正确识别“可滚动区域”。原因不是 flex 本身禁止 sticky，而是：
- 父容器没设高度，也没触发 BFC，浏览器无法确定滚动边界
- 子项用了默认的
align-items: stretch或baseline，导致 sticky 元素的“进入视口”判断失准 - 父级是
inline-flex或inline-grid—— inline 级容器不产生块格式化上下文（BFC），sticky 直接失效
实操建议：
- 给 flex/grid 父容器加
align-items: start（避免基线对齐干扰） - 显式设置
height或max-height+overflow-y: auto，让它成为真正可滚动的容器 - 避免把 sticky 元素塞进
transform、filter或will-change触发的新层叠上下文中——这些属性会创建新包含块，让 sticky 相对于该容器而非视口计算
iOS Safari 和嵌套滚动仍是硬伤
即使所有条件都满足，在 iOS Safari 上仍可能出现：
- 滚动开始瞬间 sticky 闪一下才生效，或滚动停止后延迟“吸住”
- 软键盘弹出时，导航栏被顶出视口、无法重新粘住
- 嵌套滚动容器（比如外层页面滚动 + 内层卡片内局部滚动）中，sticky 只响应最近的可滚动祖先，而不是整个视口
目前没有银弹。能做的有限：
- 避免在
textarea或input附近放 sticky 导航，减少键盘干扰 - 禁用
-webkit-overflow-scrolling: touch（它会破坏 sticky 的滚动监听） - 别依赖
will-change: transform“修复” sticky —— 在 Safari 下反而更容易懵
最常被忽略的一点：sticky 不是“永远粘在顶部”，它只在滚动超出其**最近可滚动祖先的边界**时才生效。这个边界，往往不是你肉眼以为的那个“父盒子”，而是被某个 overflow 或 transform 悄悄重定义过的包含块。
