粘性定位（sticky）是CSS position属性中一个容易被误解但非常实用的取值。它可以让元素在页面滚动过程中，先跟随文档流正常移动，当滚动到设定位置后固定下来，类似固定定位的效果，但又不脱离文档流。很多开发者把它当成relative和fixed的简单混合，实际使用中却发现有时完全不生效，这背后的机制值得仔细梳理。
一、sticky在position属性家族中的位置
要理解sticky，先要回到position属性的完整体系。position共有五个取值：static、relative、absolute、fixed和sticky。前四个大家都很熟悉，而sticky是后来的规范补充，专门用来解决「滚动到某个位置后固定」这种常见交互需求。
sticky的行为可以概括为两个阶段的切换。第一个阶段：当页面滚动距离还没有达到阈值时，元素表现为相对定位，完全跟随文档流移动；第二个阶段：当元素的滚动位置满足top、bottom、left或right中设定的阈值时，元素被「粘」在那个位置，表现为固定定位的效果。第三个阶段往往被忽略：当元素所在的父容器滚出视口时，sticky元素会跟随父容器一起离开，而不是一直固定在页面上。
这与fixed定位有本质区别。fixed定位的元素脱离文档流，相对于视口定位，无论页面怎么滚动它都固定不动；而sticky元素始终受父容器边界的约束，父容器滚走了它也跟着走。这个特性在实现「区块内吸顶」时非常有用。
基本用法很简单，只需要两行代码：
.nav {
position: sticky;
top: 0; /* 滚动后固定在距离视口顶部 0 的位置 */
}注意，单独写position: sticky而不设置top等阈值属性，元素不会有任何粘性效果，这是新手最常犯的错误之一。阈值可以是任意长度值，比如top: 20px表示元素距视口顶部20像素时开始固定。
二、sticky失效的常见原因与排查方法
实际开发中sticky不生效的情况非常多，绝大多数集中在两类原因上。第一类是父容器高度不够。sticky元素的可活动范围由其父容器决定，如果父容器本身的高度和sticky元素一样高，元素根本没有可以移动的空间，自然看不到粘性效果。例如一个div里只包含一个sticky的标题，div高度被内容撑开为100像素，这个标题就没有任何「先滚动再固定」的余地。
第二类是祖先元素的overflow设置。当任何一个祖先元素设置了overflow: hidden、overflow: auto或overflow: scroll时，sticky的参考系会变成这个滚动容器而不是视口。如果这个祖先元素不是真正的滚动容器（比如overflow设为hidden但没有滚动条），sticky元素可能看起来完全失效。排查时可以从sticky元素开始逐级向上检查所有祖先的overflow值：
/* 这种结构下 sticky 很可能失效 */
.wrapper {
overflow: hidden; /* 问题根源 */
}
.header {
position: sticky;
top: 0;
}解决办法是移除不必要的overflow设置，或者把滚动行为明确地放在预期的容器上，让sticky的参考系符合预期。另外还要注意，sticky元素不能是父容器的最后一个子元素时才有效果的说法并不准确，关键在于父容器中必须还有其他内容供sticky元素「滚过」。
还有一个细节：如果sticky元素本身设置了display: inline，粘性定位同样不会生效，需要改为inline-block或block。此外，某些浏览器的老版本不支持sticky，需要加-webkit-sticky前缀做兼容处理。
三、三个典型应用场景与完整代码
第一个场景是吸顶导航栏，这是sticky最经典的应用。相比用fixed实现，sticky不需要为导航栏预留占位空间，避免了内容跳动：
<header>页面顶部内容</header> <nav class="top-nav">导航栏</nav> <div class="content">很长的页面内容...</div>
.top-nav {
position: sticky;
top: 0;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 100; /* 避免被后续内容遮挡 */
}这里给一个z-index很值得强调，sticky元素固定后如果层级不够，会被后文的内容盖住，视觉上像效果丢失了。
第二个场景是长表格的表头固定。在数据量大的表格里，往下滚动就看不到列名是很大的体验问题，用sticky处理thead中的th即可：
table th {
position: sticky;
top: 0;
background: #f5f5f5;
z-index: 10;
}这个方案比给table套滚动容器的写法性能更好，因为它不改变表格的原生布局，渲染压力更小。
第三个场景是侧边栏跟随。希望侧边栏在主内容很长时保持可见，可以配合top值留出间距：
aside {
position: sticky;
top: 80px; /* 距顶部留 80px 呼吸空间 */
align-self: flex-start; /* flex 子项需要取消拉伸 */
}需要注意的是，在flex布局中，侧边栏默认会被拉伸到与容器同高，导致没有滚动空间，因此必须加上align-self: flex-start才能让sticky正常工作。这个坑在Grid布局中同样存在，对应的做法是把sticky元素的align-self设为start。
四、sticky的性能优势与使用建议
在sticky出现之前，实现滚动固定通常要依赖JavaScript监听scroll事件，切换class或直接改定位方式。这种方式有两个明显缺陷：一是scroll事件触发频繁，处理函数写不好容易造成卡顿；二是定位方式的切换会引起页面重排，产生内容跳动。sticky由浏览器原生处理，滚动过程中只发生合成层的变换，不需要JS参与，性能开销显著更低。
使用sticky时有几条实践建议。首先，尽量让sticky元素的父容器就是它应该滚出的那个区域，不要隔太多层嵌套，便于理解其活动边界。其次，遇到不生效的情况，优先检查三点：有没有设置top阈值、父容器高度是否充足、祖先元素有没有overflow限制。最后，吸顶场景记得处理z-index和背景色，否则固定后的元素会和下层内容重叠混淆。掌握这些要点后，sticky可以替代绝大多数JS滚动固定的方案，让布局代码更简洁可靠。
css sticky粘性定位position属性修改时间：2026-09-07 02:48:32