答案：position: sticky 是一种混合定位模式，元素在滚动到特定位置时表现如 fixed，但仍处于文档流中，依赖父容器滚动且受 overflow 属性影响，常用于导航、表头等场景。
position: sticky
这个属性。它能让一个元素在滚动到特定位置时，表现得像
position: fixed
一样固定住，但又不会脱离其父容器的文档流，直到父容器滚动出视口。简单来说，它是一种介于
relative
和
fixed
之间的混合定位模式，既保持了文档流的自然性，又提供了吸附效果。
通过
position:sticky
实现滚动吸附效果，其实比很多人想象的要直观。你需要给目标元素设置
position: sticky
，然后至少指定一个偏移量，比如
top: 0
、
bottom: 0
、
left: 0
或
right: 0
。这个偏移量定义了元素在何时开始“粘”住。例如，
top: 0
意味着当元素的顶部触碰到视口顶部时，它就会固定在那里。
为什么我的
position: sticky
不生效？常见陷阱与调试技巧
说实话，刚开始用
position: sticky
的时候，我个人也踩过不少坑。这个属性有时候会让人觉得有点“脾气”，明明设置了却没效果。最常见的原因之一，就是它的父容器。
position: sticky
元素需要一个可滚动的祖先元素来“观察”滚动，并且这个祖先元素不能设置
overflow: hidden
、
overflow: auto
或
overflow: scroll
（除非是元素本身所在的滚动容器）。如果你的父容器或任何祖先元素设置了
overflow: hidden
，那
sticky
元素就无法感知到滚动，自然也就不会吸附了。
立即学习“前端免费学习笔记（深入）”；
另一个常见问题是父容器的高度。如果
sticky
元素的父容器高度不足以让它有足够的滚动空间来“吸附”，它可能就没机会触发粘性效果。比如，一个导航栏设置
sticky
，但其父容器的高度只比导航栏高一点点，那导航栏可能还没来得及“粘”住，父容器就滚动出去了。我通常会检查父容器的
height
或
min-height
，确保有足够的空间让
sticky
元素在其中自由“移动”并触发吸附。
还有，
属性也可能作祟。
position: sticky
元素不应该在表格的某些
display
模式下（如
display: table-cell
或
display: flex
的某些子项）使用，这可能会导致意想不到的行为。调试时，我习惯用浏览器的开发者工具，选中
sticky
元素，然后查看其计算样式，尤其是
position
属性是否真的变成了
sticky
，以及有没有其他样式覆盖或冲突。同时，检查其父元素的
overflow
属性是关键一步。
position: sticky
与
position: fixed
有何不同？何时选择哪一个？
这真的是一个非常经典的问题，也是理解
sticky
精髓的关键。在我看来，
position: fixed
就像一个完全脱离了世俗的隐士，它只认视口（viewport）这个“大世界”，一旦固定，无论你页面怎么滚动，它都纹丝不动地待在视口的某个位置。它不关心自己原来在哪个父元素里，也不关心父元素滚动到哪里去了。
而
position: sticky
则更像是一个有家庭观念的个体。它虽然也能在滚动时固定，但它始终记得自己的“家”（父容器）。它只会在父容器的范围内表现出“固定”的行为。一旦父容器滚动出了视口，或者
sticky
元素已经到达了父容器的边缘，它就会随着父容器一起滚动，重新回到文档流的自然状态。
所以，选择哪一个，取决于你的需求。如果你需要一个全局的、始终可见的元素（比如页面顶部的导航栏，无论滚动到哪里都跟着），那
position: fixed
是首选。但如果你想让某个侧边栏、章节标题或者表格头部在特定区域内吸附，并且当该区域滚动出视口后，它也能跟着一起消失，那么
position: sticky
就是那个更优雅、更符合语义的解决方案。它避免了
fixed
元素可能造成的布局错乱，因为它不会完全脱离文档流。
position: sticky
在实际项目中如何应用？
position: sticky
的应用场景其实非常广泛，而且它往往能以一种非常简洁的方式解决复杂的用户体验问题。我个人最喜欢用它来处理以下几种情况：
-
侧边导航或目录： 想象一个长文章页面，右侧有一个文章目录。当用户向下滚动时，目录可以吸附在视口顶部，方便随时跳转。但当文章内容滚动到底部，目录也应该随着文章一起消失。这正是
sticky
的完美舞台。
.sidebar { position: sticky; top: 20px; /* 距离视口顶部20px时开始吸附 */ align-self: flex-start; /* 如果父元素是flex容器，确保它不会被拉伸 */ } -
表格头部： 在一些数据量巨大的表格中，当用户滚动表格内容时，表格的列头如果能保持可见，那用户体验会好很多。给
<thead>
或特定的
<th>
元素设置
position: sticky
就能实现这个效果。
table thead th { position: sticky; top: 0; background: #f0f0f0; /* 防止内容透出 */ z-index: 10; /* 确保它在内容之上 */ } -
分章节标题： 在一些需要按章节展示内容的页面，每个章节的标题可以在滚动到视口顶部时暂时吸附，提示用户当前阅读的章节。这比在页面顶部动态更新标题要自然得多。
-
内容区块的浮动操作按钮： 比如在一个可滚动的卡片列表中，每张卡片内部可能有一个“编辑”或“删除”按钮组。当卡片滚动到视口顶部时，这些按钮可以暂时吸附，方便用户操作，直到卡片完全滚动出视口。
这些应用都体现了
sticky
的一个核心优势：它能让元素在保持其原有上下文的同时，获得临时的“固定”能力。这不仅简化了 CSS 布局，也大大提升了用户体验的流畅性。当然，使用时别忘了检查兼容性，虽然现在主流浏览器支持度已经很高了，但对于一些老旧的浏览器，可能还需要
-webkit-sticky
前缀，或者考虑降级方案。
