position: sticky 不生效的根本原因是父容器存在 overflow 隐藏或 transform/filter/will-change 等触发层叠上下文的属性；sticky 依赖最近可滚动祖先作为参考系，且需满足 top 为具体值、非脱离流等条件。
position: sticky 为什么加了 top 却不生效
根本原因通常是父容器有 overflow 隐藏或滚动限制，或者 sticky 元素的祖先节点设置了 transform、filter、will-change 等触发层叠上下文的属性——这些都会让 position: sticky 失效。
实操建议：
- 检查最近的父级是否设置了
overflow: hidden、overflow: auto或overflow: scroll；如有，要么去掉，要么把 sticky 元素移到该容器外 - 用浏览器开发者工具选中元素，看 computed 样式里
position是否真的变成了sticky（不是 fallback 到static） -
top值必须是具体长度（如top: 10px），不能是top: 0%或top: auto - 确保元素本身没有设置
float、clear或display: table-cell——这些也会禁用 sticky
sticky 和 fixed 的行为差异在哪
position: sticky 是“相对滚动位置的条件固定”，而 position: fixed 是“相对于视口绝对固定”。关键区别在于：sticky 会随文档流占位，fixed 会脱离文档流、可能遮挡后续内容。
常见错误现象：
- 用
fixed实现导航栏，下拉时内容被顶上去（因为 fixed 脱离流，下面元素上移） - 误以为 sticky 会一直贴顶，其实它只在“滚动进入阈值”和“滚动出容器底部”之间生效
- 没设
top，结果元素始终以默认位置“粘”住（相当于top: 0，但容易误判为没动）
性能影响：sticky 由浏览器原生优化，开销远低于监听 scroll + JS 动态切 fixed，且天然支持 CSS 滚动边界（比如在 height: 400px; overflow-y: auto 的容器内也能工作）。
多层嵌套滚动容器中 sticky 怎么定位
sticky 的“滚动参考系”是**最近的、具有滚动能力的祖先容器**，不是整个页面。也就是说，如果元素在 <div style="height: 300px; overflow-y: auto"> 里面，它的 <code>top 就是相对于这个 div 的顶部起算，而不是 viewport。
使用场景举例：表格表头固定、侧边栏目录锚点高亮、卡片列表中的分组标题。
实操要点：
- 确认目标容器确实可滚动（
overflow-y: auto或scroll，且内容高度 > 容器高度） - sticky 元素必须是该容器的直系子元素，或至少中间没有“阻断滚动传播”的层叠上下文
- 若需同时响应页面滚动和局部容器滚动，无法靠单个 sticky 实现——得用 JS 监听两个 scroll 事件分别控制
兼容性与降级 fallback 方案
现代 Chrome/Firefox/Safari/Edge 均支持 position: sticky，但 iOS Safari ≤ 15.4 和 Android WebView ≤ 76 存在 bug：比如 top 值在某些缩放比例下计算偏移、或首次滚动不触发。
简单降级建议：
- 用 @supports 检测：
@supports (position: sticky) { .header { position: sticky; top: 0; } } - 不支持时，回退到
position: relative+ JS 监听scroll，动态加position: fixed类；注意处理fixed下的宽度塌陷（加width: 100%或记录原始 width） - 避免在
transform: scale()的容器里用 sticky——即使浏览器标称支持，实际表现也极不稳定
最常被忽略的一点：sticky 元素的 z-index 必须显式设置，否则在复杂层叠场景中容易被兄弟元素遮盖，而且这个 z-index 只在它所在的层叠上下文中起作用。
