sticky元素卡住不动，根本原因是其非static定位的父容器高度为0，导致top/bottom无参考；常见于父元素内容为空、未设height/min-height，或flex/grid布局中高度塌陷。
sticky 元素卡住不动，其实是父容器高度为 0
当 position: sticky 不生效，最常见原因是其最近的**非 static 定位祖先容器高度塌陷**——比如父元素没内容、没设置 height 或 min-height，又或者被 display: flex / grid 的默认行为“压扁”了。sticky 不是悬浮，它依赖父容器提供滚动上下文和可用空间，父高为 0，top/bottom 就无从参考。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查父容器 computed height，确认是否真为
0px - 给父容器加
min-height: 100vh或明确的height（如height: 500px），快速验证是否是高度问题 - 若父容器是
flex布局，检查是否漏了flex-shrink: 0或子项触发了意外收缩（例如图片没设max-width: 100%）
flex 容器里 sticky 子项突然失效
在 display: flex 的父容器中，sticky 元素常因主轴方向尺寸未约束而“脱离滚动流”。尤其当父容器设了 flex-direction: column，且没限制自身高度时，sticky 会认为没有滚动空间，直接退化为 relative。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给 flex 父容器显式设置
height或max-height，例如height: calc(100vh - 60px) - 避免对 sticky 元素本身设
align-self: stretch或flex: 1，这可能干扰其定位计算 - 若需 sticky 区域随内容自适应，改用
min-height+overflow-y: auto组合，让容器内部可滚动，sticky 才有作用域
sticky 在 transform 祖先下完全不工作
只要 sticky 元素的任意一个祖先设置了 transform、filter、will-change、opacity 等属性，就会创建新的层叠上下文和**包含块（containing block）**，导致 sticky 失去对视口滚动的响应能力——它开始相对于这个 transform 祖先定位，而该祖先往往静止不动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 DevTools 的 Layers 面板或勾选 “Paint Flashing”，快速定位是否有意外的
transform祖先 - 把 sticky 元素提到更高层级，避开带
transform的 wrapper；或移除祖先不必要的transform: translateZ(0)等强制硬件加速写法 - 若必须保留 transform，考虑改用
position: fixed+ JS 监听scroll手动同步位置（但注意性能损耗）
移动端 Safari 中 sticky 表现异常
iOS Safari 对 sticky 支持较晚（iOS 14.5+ 较稳定），且存在两个经典坑：一是父容器若用了 overflow: hidden 或 overflow: auto 却没设高度，sticky 会直接消失；二是页面初始缩放（viewport zoom）可能重置 sticky 的计算基准。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有明确
height或min-height，且不要仅靠vh（Safari 对动态 viewport 变化响应滞后） - 避免在 sticky 元素上同时使用
backdrop-filter—— 这在旧版 iOS 会直接禁用 sticky - 测试时关闭双指缩放：
sticky 的“粘性”不是魔法，它严格依赖祖先链的高度、定位上下文和渲染层结构。最容易被忽略的是：它既不脱离文档流，也不真正脱离滚动容器——一旦父容器无法提供可滚动的、有高度的包含块，它就只是个普通 relative 元素。
