sticky定位结合flex布局可实现滚动粘性效果，常用于导航栏、侧边栏等场景；需设置top或bottom值且父容器不能有overflow:hidden。
在CSS中，sticky定位与flex布局可以很好地结合使用，实现既灵活又具备滚动粘性效果的页面结构。这种组合常用于侧边栏、导航栏或表格表头等需要在滚动时保持可见的场景。
什么是sticky定位
position: sticky; 是一种相对定位和固定定位的混合形式。元素在正常文档流中占据位置（像relative），当用户滚动页面到达设定的阈值时，它会“粘”在视口的某个位置（像fixed）。
使用sticky需要指定一个偏移量，例如：
- top: 0 — 滚动到顶部时粘住
- bottom: 0 — 滚动到底部时粘住
注意：sticky只在它的父容器内生效，且父级不能有overflow:hidden限制其行为。
立即学习“前端免费学习笔记（深入）”；
flex布局中的sticky应用
在flex容器中，子元素可以同时使用display: flex和position: sticky，不会冲突。常见的布局如侧边栏+内容区，或者水平排列的标签页滚动吸附。
示例：两栏布局中让侧边栏滚动时吸顶
.container {
display: flex;
}
.sidebar {
flex: 1;
position: sticky;
top: 10px;
}
.content {
flex: 3;
}
这样，.sidebar会在滚动过程中距离顶部10px时固定住，直到父容器边界结束。
常见问题与注意事项
虽然sticky和flex能共存，但需要注意以下几点才能确保效果正常：
- 父容器不要设置overflow: hidden，否则sticky会被截断失效
- sticky元素必须有明确的top或bottom值，否则不起作用
- 在flex-direction为column时，竖向滚动中sticky依然有效；若为row，则横向滚动也支持（浏览器需支持）
- 移动端兼容性较好，但仍建议测试iOS Safari等环境
实用场景示例：横向滚动标签栏
在移动端选项卡中，使用flex布局横向排列标签，并让当前选中项在可视范围内“粘”住。
.tab-container {
display: flex;
overflow-x: auto;
}
.tab-item {
flex: 0 0 auto;
position: sticky;
left: 0; /* 向左滚动时第一个可见项吸附 */
background: white;
z-index: 10;
}
这样，即使列表很长，用户滚动时关键标签仍可短暂停留，提升体验。
基本上就这些。只要理解sticky的作用条件和flex的弹性分配机制，两者结合使用非常自然，能解决很多现代网页中的交互需求。不复杂但容易忽略细节。
