在响应式页面开发中，我们常常需要一部分区域始终停留在视口固定位置，比如顶部导航或右下角悬浮按钮，而其余内容要根据屏幕宽度自由伸缩。把position与flex结合使用，就能兼顾固定与流动两种需求。
为什么需要position与flex结合
flex布局擅长在容器内部按比例分配空间，处理流动元素非常方便。但它本身不提供脱离文档流的固定能力。position中的fixed和sticky可以让元素脱离普通流或黏性停靠，却不适合直接排布大量自适应内容。两者结合，外层用flex管流动，内层或浮层用position管固定，结构更清晰。
基础结构示例
下面用一个顶部固定导航加下方流动主体的例子说明。导航用fixed固定在顶部，主体区域用flex做响应式排列。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 固定顶部导航 */
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: #333;
color: #fff;
line-height: 50px;
padding: 0 16px;
z-index: 10;
}
/* 主体容器，留出导航高度 */
.main {
margin-top: 50px;
display: flex;
flex-wrap: wrap;
padding: 16px;
gap: 16px;
}
.card {
flex: 1 1 200px;
background: #f0f0f0;
padding: 20px;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="nav">固定导航</div>
<div class="main">
<div class="card">流动卡片一</div>
<div class="card">流动卡片二</div>
<div class="card">流动卡片三</div>
</div>
</body>
</html>
使用sticky实现局部固定
如果不想完全脱离文档流，可以用position: sticky让元素在滚动到特定位置前跟随流动，之后黏在顶部。它和flex容器也能很好配合。
.sidebar {
position: sticky;
top: 60px; /* 距离顶部60px时黏住 */
align-self: flex-start; /* 在flex容器中顶部对齐 */
flex: 0 0 200px;
background: #e8e8e8;
padding: 12px;
}
常见组合方式
- fixed + flex：浮层或导航固定，内容区flex流动，适合后台和移动端。
- sticky + flex：侧边栏或表头随滚动黏住，页面整体仍弹性排版。
- absolute + flex：在相对定位的flex子项内放绝对定位小元素，做角标或提示。
需要注意的问题
| 问题 | 说明 |
|---|---|
| 层级覆盖 | fixed元素要设z-index，避免被flex内容挡住 |
| 移动端兼容 | sticky在旧版浏览器支持不好，需测试 |
| 宽度计算 | fixed元素宽100%时，flex容器要留对应margin |
小结
用position处理固定，用flex处理流动，是响应式布局里非常实用的搭配。理清哪部分该脱离文档流、哪部分该弹性伸缩，就能写出既稳定又自适应的页面。