sticky定位不生效的主因是缺少两个前提：父容器需有滚动上下文（如overflow-y:auto），且元素必须设置top/bottom/left/right偏移值；否则浏览器视其为普通流内元素。
sticky 定位为什么经常“不生效”
直接写 position: sticky 却没反应，大概率是因为缺少两个必要前提：父容器必须有明确的滚动上下文（比如设置了 overflow-y: auto 或是页面自然滚动），且元素本身必须有 top、bottom、left 或 right 中至少一个偏移值。没有 top 这类值，浏览器会把它当普通流内元素处理。
常见错误场景：
- 父容器是
div但没设高度和overflow，导致内部无法滚动，sticky 失效 - 写了
position: sticky却漏掉top: 0，结果元素位置完全不变 - 父级用了
transform、perspective或filter，这会创建新的层叠上下文并阻断 sticky 的锚定行为
sticky 的触发边界由谁决定
sticky 元素的“粘住”范围，取决于它在**最近的具有滚动能力的祖先容器**中的可视区域。不是整个 viewport，也不是 body，而是那个实际在滚动的容器。
例如：
立即学习“前端免费学习笔记（深入）”；
- 如果 sticky 元素在
div.scroll-container内，而该div设置了height: 400px; overflow-y: scroll，那么 sticky 只在这个 400px 高度内生效 - 如果父容器没有滚动能力，浏览器会继续向上查找，直到找到
body或documentElement—— 但前提是它们本身能滚动（即内容溢出） -
top: 20px表示：当元素顶部距离其滚动容器顶部还有 20px 时，开始“粘住”，不再随容器滚动而上移
sticky 和 fixed 的关键区别在哪
fixed 是脱离文档流、相对于 viewport 定位；sticky 是**仍在文档流中**，只是在滚动到临界点时临时表现得像 fixed。
这意味着：
- sticky 元素仍占据原始文档空间，不会导致下方内容突然上跳
- 它受父容器
padding、border影响，而 fixed 不受影响 - 当滚动回初始位置时，sticky 会自动“松开”并回到原本的流式位置；fixed 则永远固定在 viewport 某处
- 不支持
z-index跨越非 sticky 祖先层级提升层级 —— 它的层叠上下文仍由最近的定位祖先或 stacking context 决定
兼容性与降级建议
Chrome 56+、Firefox 59+、Safari 6.1+ 支持 sticky，但 iOS Safari 旧版本（如 iOS 9.3）存在偏移计算异常；Android WebView 在 4.4 及更早版本基本不支持。
安全做法：
- 用
@supports (position: sticky)做特性检测，避免影响老设备布局 - 对不支持的环境，可用 JS 监听
scroll+getBoundingClientRect()模拟，但注意性能（需防抖） - 慎用在
table元素内部 —— 大多数浏览器不支持position: sticky在td或th上生效
真正难处理的不是怎么写 sticky，而是它依赖的滚动容器是否“干净”：没有意外的 transform、没有被 will-change 干扰、没有嵌套过深的 overflow: hidden 阻断链。这些细节一旦出错，sticky 就静默失效，连控制台都不会报错。
