sticky定位是relative与fixed的结合体：初始如relative在文档流中，滚动至临界点（如top:0）时“粘住”视口，父容器移出视口后恢复relative；需设top/bottom/left/right、祖先无overflow:hidden/auto、非table布局且父容器有高度。
sticky 定位是 relative 和 fixed 的结合体，它让元素在滚动到特定位置前保持相对定位，到达临界点后“粘住”在视口指定位置，直到其父容器离开视口或被其他条件解除。
很多人写完 position: sticky; 没效果，往往是因为忽略了这些硬性条件：
top、bottom、left 或 right 中的至少一个偏移值（例如 top: 0;），否则等同于 relative
overflow: hidden、scroll 或 auto（除非该祖先本身也是 sticky 容器且满足条件）table 相关的 display 类型（如 table-row、table-cell），需用 block 或 inline-block 等常规布局最典型的是顶部导航栏固定、表格表头冻结、侧边栏吸附：
.header { position: sticky; top: 0; z-index: 100; }，放在页面顶部容器内即可 内的 加 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
的核心区别