fixed元素始终相对于视口固定，不随滚动变化；sticky元素在滚动至阈值时才相对最近可滚动祖先容器固定，超出范围即恢复文档流位置。
滚动时“固定”的触发逻辑完全不同
fixed 元素从渲染完成那一刻起就死死焊在视口上，滚动不滚动，它都纹丝不动；sticky 元素则全程“观望”——它先老老实实待在文档流里（表现如 relative），只有当滚动使它的边界触达你设定的阈值（比如 top: 20px），才突然“吸住”视口；一旦它的父容器滚出可视区，它立刻松开，继续随文档流往下走。
- fixed：无条件固定，滚动即生效，且永不退出
- sticky：有条件固定，只在滚动进入/停留在阈值范围内生效，超出父容器范围自动解除
- 典型现象：用 sticky 做表头，滚动到页面底部时表头会消失；用 fixed 做表头，它永远钉在顶部，哪怕下面已经没内容了
定位参考系根本不同
fixed 的坐标原点永远是视口（window），跟 dom 结构完全无关；sticky 的坐标原点则是它的最近可滚动祖先容器（比如一个 overflow: auto 的
），不是视口，也不是
- 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 是相对+固定的混合”，而是每次写之前都得检查父容器有没有悄悄把它封印住。