css sticky 和 fixed 有什么本质区别_从滚动行为角度对比说明_技术百科

css sticky 和 fixed 有什么本质区别_从滚动行为角度对比说明

技术百科 | 2026-01-25 00:00

fixed元素始终相对于视口固定，不随滚动变化；sticky元素在滚动至阈值时才相对最近可滚动祖先容器固定，超出范围即恢复文档流位置。

滚动时“固定”的触发逻辑完全不同

fixed 元素从渲染完成那一刻起就死死焊在视口上，滚动不滚动，它都纹丝不动；sticky 元素则全程“观望”——它先老老实实待在文档流里（表现如 relative），只有当滚动使它的边界触达你设定的阈值（比如 top: 20px），才突然“吸住”视口；一旦它的父容器滚出可视区，它立刻松开，继续随文档流往下走。

fixed：无条件固定，滚动即生效，且永不退出
sticky：有条件固定，只在滚动进入/停留在阈值范围内生效，超出父容器范围自动解除
典型现象：用 sticky 做表头，滚动到页面底部时表头会消失；用 fixed 做表头，它永远钉在顶部，哪怕下面已经没内容了

定位参考系根本不同

fixed 的坐标原点永远是视口（window），跟 DOM 结构完全无关；sticky 的坐标原点则是它的最近可滚动祖先容器（比如一个 overflow: auto 的 ），不是视口，也不是。这意味着 sticky 的行为高度依赖父级容器的尺寸和滚动状态。


fixed 不怕父容器加 transform、overflow: hidden 或 filter，它只认视口
sticky 非常怕这些：父容器有 overflow: hidden 或 transform 会直接让它失效（变成普通 relative）
如果父容器本身不可滚动（比如高度不够、没设 overflow），sticky 就永远不会触发“粘住”行为


是否脱离文档流，决定布局干扰程度
fixed 元素被彻底踢出文档流，它原来占的位置瞬间塌陷，其他元素会立刻补位；sticky 元素始终保留在文档流中，它“粘住”时仍占据原始空间（只是视觉上浮起），不会导致下方内容上跳或重排。

用 fixed 做侧边栏，正文内容会向左“闪”一下（因为侧边栏不占位了）
用 sticky 做侧边栏，正文宽度不变，滚动时它只是“叠”上去，无布局抖动
sticky 必须配合 top/bottom/left/right 才
生效，否则等同于 relative


兼容性与常见失效原因
fixed 在所有现代浏览器中稳定支持；sticky 虽已广泛支持（Chrome 56+、Firefox 59+、Safari 15.4+），但失效场景极多，且错误不报错——它就默默退化成 relative，让你以为“写对了但没效果”。

最常踩的坑：parent { overflow: hidden } → sticky 直接失效
次常见：parent { transform: translateZ(0) } 或 filter: blur(1px) → 同样禁用 sticky
移动端软键盘弹出时，部分 Android WebView 会重置 sticky 行为，导致表头“掉下来”
调试建议：用浏览器开发者工具检查元素 computed position，若显示 relative 但你写了 sticky，基本就是父容器限制导致
.table-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}
/* 确保父容器可滚动且不限制 sticky */
.table-container {
  max-height: 400px;
  overflow-y: auto;
  /* ❌ 删掉这行：overflow: hidden; */
  /* ❌ 删掉这行：transform: scale(1); */
}
真正难的不是记住“sticky 是相对+固定的混合”，而是每次写之前都得检查父容器有没有悄悄把它封印住。