sticky定位是relative与fixed的结合，元素在滚动到设定阈值（如top:0）时固定于视口，常用于侧边栏或表头；在flex布局中，sticky子项可保持弹性容器结构的同时实现局部吸顶效果，例如两栏布局中侧边栏随滚动固定，需注意父容器避免overflow:hidden并确保足够滚动高度，且兼容性上需考虑旧浏览器支持问题。
在现代网页布局中，sticky 定位与 flex 布局的结合使用非常常见，尤其适用于需要局部固定效果（如侧边栏或导航）同时保持整体弹性结构的场景。这种组合既灵活又高效，无需复杂 JavaScript 就能实现动态粘性效果。
什么是 sticky 定位？
position: sticky 是 relative 与 fixed 的混合体。元素在正常文档流中表现为 relative，但当其滚动到特定阈值（如 top: 0）时，就“粘”在视口的某个位置，表现类似 fixed，直到父容器脱离视口才解除固定。
关键点：
- 必须设置一个阈值（如 top、bottom）才能生效
- 作用范围受限于其最近的可滚动祖先或父容器边界
- 不脱离文档流，不会影响其他 flex 项的布局
flex 布局中的 sticky 应用场景
在 flex 容器中，子元素可以是 flex 项的同时也设置为 sticky，这在以下情况特别有用：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏导航随页面滚动而固定
- 表格头部在横向滚动时保持列头可见
- 卡片布局中某个区块需要局部吸顶
实际示例：两栏布局中固定侧边栏
假设我们有一个主内容区和一个侧边栏，使用 flex 布局并让侧边栏在垂直滚动时 sticky 固定：
.container {
display: flex;
gap: 20px;
}
<p>.sidebar {
flex: 1;
position: sticky;
top: 20px; /<em> 距离视口顶部 20px 时开始固定 </em>/
height: fit-content;
}</p><p>.main-content {
flex: 3;
}</p>HTML 结构：
<div class="container"> <aside class="sidebar">...</aside> <main class="main-content">...</main> </div>
这样，.sidebar 会随页面滚动，在到达 top: 20px 时固定，但仍保留在 flex 布局中，不会破坏整体排版。
注意事项与兼容性
虽然 sticky 和 flex 结合强大，但需注意：
- 父容器不应有 overflow: hidden，否则 sticky 可能失效
- 确保 sticky 元素的父级足够高，以便有足够的滚动空间触发效果
- 在某些旧版本浏览器中（如 IE 不支持），需添加 -webkit-sticky 前缀或提供降级方案
基本上就这些。只要理解 sticky 的触发机制和 flex 的空间分配逻辑，两者配合使用非常自然，能有效提升用户体验而不增加复杂度。
