相对定位为子元素创建上下文而不影响flex布局；2. 绝对定位使元素脱离flex流，需手动定位且不受flex属性影响；3. 固定定位完全脱离文档流，与flex共存但需注意层级。
在弹性盒子（Flexbox）布局中，CSS定位的使用需要结合flex容器和项目的特点。虽然Flexbox本身通过主轴和交叉轴控制子元素排列，但有时仍需配合
position属性实现更复杂的布局效果。
1. 弹性容器中的相对定位
当在弹性容器或项目上使用
position: relative时，主要作用是为绝对定位的子元素创建定位上下文。
常见场景：在某个flex item内部进行精确定位。
- 给flex item设置
position: relative
- 其内部的子元素可使用
position: absolute
相对于该item定位 - 不影响flex布局的整体结构
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.item {
position: relative;
width: 200px;
}
.badge {
position: absolute;
top: 0;
right: 0;
background: red;
}
2. 绝对定位脱离弹性流
将flex item设为
position: absolute会使其脱离正常的flex布局流。
此时该元素不再参与flex排列，原有空间被释放，其他item会重新分布。
nitc企业模版免费下载3.2
下载
网站设计精美：前台页面全部采用DIV+CSS架构，设计严格规范，页面精美大气，布局合理。 管理操作方便：后台管理界面友好，使用方便，功能强大，系统安全，性能稳定。用户使用 全自动化控制，功能模块可扩展性强。 搜索引擎优化：经多位网络营销专家制定，严格按照搜索引擎规范进行优化，以致在最短 的时间内提升网站的曝光率。 企业办公应用：提拱相关的询盘/订单管理、业务管理、客户管理等企业常用办公基础应用 服
- 适用于需要覆盖或固定在某位置的元素
- 必须手动设置
top
、left
等值来定位 - 常用于悬浮按钮、角标、遮罩层等场景
注意：绝对定位后元素不再受
align-items、
justify-content等flex属性影响。
3. 固定定位与弹性布局共存
position: fixed让元素相对于视口定位，完全脱离文档流。
即使放在flex容器内，也不会受flex布局规则约束。
- 适合做全局导航、返回顶部按钮
- 布局时忽略其存在，其余flex item正常排列
- 需注意层级（z-index）避免被遮挡
关键点总结：
- flex布局主导整体结构
- 定位属性用于局部微调或特殊需求
- 脱离文档流的定位会打破flex排列
- 相对定位不破坏flex行为，推荐用于内部定位
基本上就这些。灵活搭配才能应对复杂界面。
