CSS sticky定位使用教程：吸顶导航、表头固定与常见失效原因

position: sticky 是 CSS 里非常实用的定位方式，常用于吸顶导航、侧边目录、表格表头固定、筛选栏固定等场景。它既不像 fixed 那样完全脱离文档流，也不像普通定位那样只能待在原地，而是在滚动到指定位置后“粘住”。

不过 sticky 也很容易失效。很多人写了 position: sticky，页面却毫无反应，通常不是浏览器不支持，而是父容器、滚动容器、高度、偏移值或 overflow 设置出了问题。本文从基础用法讲起，再逐个排查常见失效原因。

基础写法

sticky 的基本写法是给元素设置 position: sticky，并指定一个偏移值，比如 top: 0。当页面滚动到这个元素距离视口顶部 0 像素时，它就会保持在顶部。

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
}

top、right、bottom、left 至少要设置一个，否则 sticky 没有触发边界。吸顶场景最常见的是 top: 0。

sticky 和 fixed 区别

fixed 是相对浏览器视口固定，元素会脱离文档流；sticky 则先按普通元素参与布局，滚动到阈值后才表现得像固定定位。

这意味着 sticky 不会一开始就悬浮在页面上，它保留原本占位，更适合文章目录、分组标题、表头、筛选栏等需要跟随内容上下文的区域。

吸顶导航

吸顶导航是 sticky 最典型的场景。导航栏在页面顶部正常显示，用户向下滚动时，它固定在顶部，方便继续访问菜单。

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}

实际项目里记得设置背景色和层级。如果没有背景色，滚动内容可能透在导航下方；如果 z-index 太低，导航可能被其他元素遮住。

侧边目录

文章详情页常见侧边目录，也很适合 sticky。目录跟随页面滚动，在视口内保持可见，但不会超出父容器范围。

.toc {
  position: sticky;
  top: 80px;
}

top: 80px 常用于页面已有固定头部的情况，避免目录顶到导航下面被遮挡。这个值要根据实际头部高度调整。

表头固定

长表格中，可以让表头在滚动时固定。常见写法是给表头单元格设置 sticky。

th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

表格场景里背景和层级尤其重要。如果表头背景透明，下面的表格内容会穿透显示，阅读体验很差。

父容器边界

sticky 元素会受父容器边界限制。它只能在父容器范围内粘住，滚动到父容器结束时，sticky 状态也会结束。

如果父容器高度不够，或者 sticky 元素所在容器本身很短，你可能会觉得它“刚粘住就消失”。这不是失效，而是父容器边界太短。

overflow 导致失效

sticky 最常见的坑之一，是祖先元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll。这些设置可能改变 sticky 的滚动参考容器。

.wrapper {
  overflow: hidden;
}

如果 sticky 不生效，优先检查它的所有父级元素是否设置了 overflow。很多时候不是 sticky 写错，而是外层布局为了裁剪或清除浮动加了 overflow，导致粘性定位参考变了。

高度不足

sticky 需要滚动空间才能体现效果。如果页面本身没有足够高度，或者父容器没有滚动距离，自然看不到吸附效果。

测试 sticky 时，可以临时增加内容高度，确认滚动区域存在。对于侧边栏目录，父容器通常要比目录本身高，sticky 才有发挥空间。

偏移值遗漏

只写 position: sticky 不够，还必须设置偏移值。没有 top 或其他方向值时，浏览器不知道什么时候触发粘性状态。

.wrong {
  position: sticky;
}

.right {
  position: sticky;
  top: 0;
}

吸顶用 top，吸底用 bottom。如果横向滚动里做固定列，可以考虑 left 或 right。

层级遮挡

sticky 元素不是天然最高层。如果页面里有其他定位元素、弹窗、横幅或广告位，sticky 可能被遮住。此时需要设置合适的 z-index，并注意定位上下文。

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

同时要避免盲目写超大 z-index。层级应该有统一规范，否则后续弹窗、下拉菜单、吸顶导航之间容易互相打架。

移动端注意事项

移动端使用 sticky 时，要注意浏览器地址栏变化、顶部安全区域、固定头部高度和滚动容器。复杂移动端页面里，如果内部容器滚动，sticky 可能相对内部容器生效，而不是整个页面。

如果顶部有固定导航，可以给 sticky 元素设置更大的 top，或者使用 CSS 变量统一管理头部高度，避免多个地方写死。

排查清单

sticky 不生效时，可以按这个顺序检查：是否设置了 top 等偏移值；父容器是否有足够高度；页面是否存在滚动空间；祖先元素是否设置了 overflow；是否被其他元素遮挡；sticky 元素是否受父容器边界限制。

只要按这个顺序排查，大多数 sticky 问题都能定位。它本身并不复杂，难点主要在于它和滚动容器、父级边界、层级关系之间的配合。

实践建议

普通吸顶导航可以直接使用 position: sticky; top: 0，再补背景和层级。文章侧边目录要结合头部高度设置 top。表格表头固定要给表头设置背景色，避免内容穿透。

如果你的需求是始终固定在视口某个位置，不受父容器影响，应该用 fixed；如果希望元素在自己的内容范围内滚动到一定位置后粘住，sticky 才是更合适的选择。