sticky定位是relative与fixed的结合体：初始如relative在文档流中，滚动至临界点（如top:0）时“粘住”视口，父容器移出视口后恢复relative；需设top/bottom/left/right、祖先无overflow:hidden/auto、非table布局且父容器有高度。
sticky 定位是 relative 和 fixed 的结合体，它让元素在滚动到特定位置前保持相对定位，到达临界点后“粘住”在视口指定位置，直到其父容器离开视口或被其他条件解除。
sticky 的生效前提必须满足
很多人写完 position: sticky; 没效果，往往是因为忽略了这些硬性条件：
- 必须设置
top、bottom、left或right中的至少一个偏移值（例如top: 0;），否则等同于relative - 元素的任意一个祖先容器不能有
overflow: hidden、scroll或auto（除非该祖先本身也是 sticky 容器且满足条件） - 元素不能是
table相关的 display 类型（如table-row、table-cell），需用block或inline-block等常规布局 - 父容器需有明确高度或内容撑开，否则 sticky 区域无法被“识别”
常见使用场景与写法示例
最典型的是顶部导航栏固定、表格表头冻结、侧边栏吸附：
-
顶部吸顶导航：
.header { position: sticky; top: 0; z-index: 100; }，放在页面顶部容器内即可 -
表格表头冻结：给
<thead>内的<th>加position: sticky; top: 0; background: white;，注意需配合z-index避免被内容遮挡 -
侧边栏吸附：
.sidebar { position: sticky; top: 16px; }，适合在文章页右侧跟随滚动
兼容性与注意事项
现代浏览器（Chrome 56+、Firefox 59+、Safari 6.1+、Edge 16+）均支持，但 iOS Safari 旧版本存在 bug，比如在 overflow-scroll 容器中失效。实际开发中建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (position: sticky)做渐进增强，降级为relative或 JS 模拟 - 避免嵌套 sticky 元素，容易触发未定义行为
- 移动端慎用
bottom，部分安卓 WebView 表现不稳定 - sticky 元素脱离文档流时仍保留原有空间，不会引起下方内容跳动——这是它比 JS 实现更轻量的关键优势
和 fixed、relative 的核心区别
理解 sticky 的本质，关键看它“何时切换”：
-
relative：始终在文档流中，偏移不脱离布局上下文 -
fixed：完全脱离文档流，相对于视口定位，滚动中一直固定 -
sticky：初始表现像relative；当滚动使元素边界触及设定的top/bottom/left/right值时，自动切换为类似fixed的行为；一旦父容器整体滚出视口，又变回relative
