css粘性定位解析_css position sticky实现效果

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; }，放在页面顶部容器内即可
• 表格表头冻结：给 内的 加 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