fixed元素始终相对于视口固定，不随滚动变化；sticky元素在滚动至阈值时才相对最近可滚动祖先容器固定，超出范围即恢复文档流位置。
滚动时“固定”的触发逻辑完全不同
fixed 元素从渲染完成那一刻起就死死焊在视口上，滚动不滚动，它都纹丝不动；sticky 元素则全程“观望”——它先老老实实待在文档流里（表现如 relative），只有当滚动使它的边界触达你设定的阈值（比如 top: 20px），才突然“吸住”视口；一旦它的父容器滚出可视区，它立刻松开，继续随文档流往下走。
- fixed：无条件固定，滚动即生效，且永不退出
- sticky：有条件固定，只在滚动进入/停留在阈值范围内生效，超出父容器范围自动解除
- 典型现象：用 sticky 做表头，滚动到页面底部时表头会消失；用 fixed 做表头，它永远钉在顶部，哪怕下面已经没内容了
定位参考系根本不同
fixed 的坐标原点永远是视口（ fixed 元素被彻底踢出文档流，它原来占的位置瞬间塌陷，其他元素会立刻补位；sticky 元素始终保留在文档流中，它“粘住”时仍占据原始空间（只是视觉上浮起），不会导致下方内容上跳或重排。 fixed 在所有现代浏览器中稳定支持；sticky 虽已广泛支持（Chrome 56+、Firefox 59+、Safari 15.4+），但失效场景极多，且错误不报错——它就默默退化成 relative，让你以为“写对了但没效果”。 立即学习“前端免费学习笔记（深入）”； 真正难的不是记住“sticky 是相对+固定的混合”，而是每次写之前都得检查父容器有没有悄悄把它封印住。window），跟 DOM 结构完全无关；sticky 的坐标原点则是它的最近可滚动祖先容器（比如一个 overflow: auto 的 。这意味着 sticky 的行为高度依赖父级容器的尺寸和滚动状态。
transform、overflow: hidden 或 filter，它只认视口overflow: hidden 或 transform 会直接让它失效（变成普通 relative）overflow），sticky 就永远不会触发“粘住”行为是否脱离文档流，决定布局干扰程度
top/bottom/left/right 才生效，否则等同于 relative
兼容性与常见失效原因
parent { overflow: hidden } → sticky 直接失效parent { transform: translateZ(0) } 或 filter: blur(1px) → 同样禁用 stickyposition，若显示 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); */
}
