sticky不会让下方内容“突然上移”是因为它未触发时仍参与文档流、保留原始占位；而fixed一设即脱离文档流，导致后续元素立即填补空位。
sticky 为什么不会让下面内容“突然上移”
因为 position: sticky 在未触发前仍参与文档流，保留自身高度和占位；而 position: fixed 一设就脱离流，原始位置立刻被后续元素填补。常见错误是给导航加了 sticky 后滚动时页面“跳一下”，其实不是 sticky 失效，而是父容器高度塌陷、或兄弟元素用了 margin 导致布局重排——你得检查它前面有没有清浮动、父容器是否设置了 min-height 或内容撑高。
sticky 的滚动范围严格受限于最近可滚动祖先
一个 .sidebar { position: sticky; left: 0; } 元素，如果放在 <div style="overflow-y: auto; height: 400px;"></div> 内，它只会在该 div 内部横向吸附；一旦滚出这个 div 的可视区域，它就退回 relative 行为。而 fixed 永远相对于 viewport，不管嵌套多深、有没有 iframe。这意味着：
– 用 sticky 做表格表头，能随 tbody 滚动自然进出吸附状态；
– 用 fixed 做同样效果，就得手动监听 scroll、计算 offsetTop、判断是否进入视区，代码量和维护成本明显更高；
– iOS Safari 对父容器的 overflow: hidden 特别敏感，哪怕只是某个中间祖先写了它，sticky 就直接失效。
top/bottom/left/right 只能单向指定，但 fixed 可以组合
sticky 必须且只能指定 top、bottom、left、right 中的一个值，比如 top: 10px 或 left: 20px，不能同时写 top 和 left（否则整个声明被忽略）；fixed 则无此限制，top: 10px; left: 20px; 是合法且常用的。这决定了：
– sticky 更适合单边吸附（如顶部导航、左侧目录）；
– fixed 更适合精确锚定（如右下角悬浮按钮、带偏移的 tooltip）；
– 如果你试图用 sticky 实现“既贴顶又靠右”，得靠父容器 padding 或 flex 布局配合，不能靠定位属性硬塞。
移动端滚动行为差异直接影响交互体验
在 iOS Safari 和部分安卓 WebView 中，fixed 元素常出现“滚动卡顿”“输入框聚焦时错位”“地址栏收起后定位偏移”等问题，因为其强绑定 viewport 的机制与原生滚动优化存在冲突；而 sticky 因为始终依附于局部滚动容器，在这些场景下更稳定。但要注意：
– 它依赖父容器有明确滚动上下文，不能靠 body 直接滚动（iOS 上 body 滚动常被降级处理）；
– 若滚动容器是 div，需确保它有 height 或 max-height + overflow-y: auto，不能只靠 overflow: scroll；
– 不要指望 sticky 在 transform: translateZ(0) 强制硬件加速的容器里还能正常工作——某些旧版 Chromium 会静默禁用它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
