sticky滚动时页面不跳动是因为未触发前仍参与文档流、保留占位；fixed一设即脱离文档流，导致后续元素立即上移填补空位。
sticky 和 fixed 看似都能“固定”，但行为逻辑完全不同：fixed 一设就脱离文档流、死绑视口；sticky 是滚动时动态切换状态，前期占位、后期局部吸附。
sticky 为什么滚动时页面内容不跳动，而 fixed 会？
因为 position: fixed 声明生效的瞬间，元素立刻从文档流中消失，原始位置被后续元素直接填补——这会造成视觉“上移”或布局重排。而 position: sticky 在未触发前完全等同于 position: relative，保留自身高度、影响父容器高度计算、不干扰兄弟元素布局。
常见错误现象：.nav { position: sticky; top: 0; } 滚动后页面“跳了一下”，大概率不是 sticky 失效，而是：
- 父容器没内容撑高，或设置了
height但没配overflow-y: auto - 父容器用了
overflow: hidden（iOS Safari 下 sticky 直接静默失效） - 前面兄弟元素用了
margin-bottom，而 sticky 元素触发后脱离了流，导致 margin 折叠异常
sticky 的“固定”到底固定在哪？
position: sticky 不绑定视口，只对「最近的可滚动祖先」生效。这个祖先必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 有明确的滚动能力：比如
overflow-y: auto或scroll - 有明确高度约束：如
height: 400px或max-height: 500px（仅靠overflow不够） - 不能有
overflow: hidden的祖先（哪怕中间隔了一层）
例如：.sidebar { position: sticky; left: 0; } 放在 <div style="overflow-y: auto; height: 600px;"> 内，它只会在这个 div 宽度范围内横向吸附；一旦滚出该 div，它立刻退回 relative 行为。而 <code>fixed 始终以 viewport 为参考，不管嵌套多深。
top / bottom / left / right 设置有什么硬限制？
position: sticky 必须且只能指定 top、bottom、left、right 中的一个值。写成 top: 10px; left: 20px; 会导致整个 sticky 声明被浏览器忽略（devtools 里能看到该规则被划掉）。
而 position: fixed 没有这个限制，top 和 right 可以共存，常用于右下角悬浮按钮。
这也决定了实际使用倾向：
- 用 sticky 实现表头吸附、导航栏贴顶、侧边目录锚定——单向阈值足够
- 用 fixed 实现全局返回顶部、带偏移的 tooltip、跨 iframe 的浮层——需要多向精确定位
移动端和兼容性上哪些坑最容易踩？
iOS Safari 对 sticky 的限制最严：
- 如果滚动容器是
，很多旧版 iOS 会降级处理，sticky 不触发——务必改用内部 div 滚动 -
transform: translateZ(0)或will-change: transform可能导致 Chromium 旧版本（如 Android WebView 75 以下）静默禁用 sticky - 父容器写了
overflow: hidden，哪怕只是某个 layout wrapper，sticky 就直接失效（不会报错，也不会 fallback）
fixed 在移动端也有典型问题：软键盘弹出时 iOS 地址栏收起，视口尺寸变化，fixed 元素可能错位；而 sticky 因为依附局部滚动容器，受此影响小得多——但前提是那个容器本身没被视口变化意外截断。
