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 固定：
网站设计精美：前台页面全部采用DIV+CSS架构，设计严格规范，页面精美大气，布局合理。 管理操作方便：后台管理界面友好，使用方便，功能强大，系统安全，性能稳定。用户使用 全自动化控制，功能模块可扩展性强。 搜索引擎优化：经多位网络营销专家制定，严格按照搜索引擎规范进行优化，以致在最短 的时间内提升网站的曝光率。 企业办公应用：提拱相关的询盘/订单管理、业务管理、客户管理等企业常用办公基础应用 服
.container {
display: flex;
gap: 20px;
}
.sidebar {
flex: 1;
position: sticky;
top: 20px; / 距离视口顶部 20px 时开始固定 /
height: fit-content;
}
.main-content {
flex: 3;
}
HTML 结构：
...
这样，.sidebar 会随页面滚动，在到达 top: 20px 时固定，但仍保留在 flex 布局中，不会破坏整体排版。
注意事项与兼容性
虽然 sticky 和 flex 结合强大，但需注意：
- 父容器不应有 overflow: hidden，否则 sticky 可能失效
- 确保 sticky 元素的父级足够高，以便有足够的滚动空间触发效果
- 在某些旧版本浏览器中（如 IE 不支持），需添加 -webkit-sticky 前缀或提供降级方案
基本上就这些。只要理解 sticky 的触发机制和 flex 的空间分配逻辑，两者配合使用非常自然，能有效提升用户体验而不增加复杂度。
