绝对定位元素脱离文档流，不参与Flex布局，但可通过设置父容器position: relative使其相对于容器定位，实现与Flex布局的协同。
Flexbox 和绝对定位可以共存，但在使用时需要理解它们的相互作用。绝对定位元素脱离了正常的文档流，因此不会参与 Flexbox 的布局计算。这意味着即使一个元素是 Flex 容器的直接子元素，如果它被设置为 position: absolute，它将不再受 flex 属性（如 flex-grow、flex-shrink、align-self 等）的影响。
绝对定位子元素不参与 Flex 布局
当子元素设置了 position: absolute，它会从 Flex 容器的布局中“抽离”，容器会像它不存在一样排列其他子元素。
HTML 结构：
<div class="container"> <div class="item1">正常 flex 项</div> <div class="item2">绝对定位</div> </div>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 1px solid #ccc;
position: relative; /* 重要：为绝对定位提供参照 */
}
<p>.item1 {
background: lightblue;
padding: 20px;
}</p><p>.item2 {
position: absolute;
top: 10px;
right: 10px;
background: salmon;
padding: 10px;
}在这个例子中，.item2 虽然是容器的子元素，但因为是绝对定位，不会影响 .item1 的居中位置。容器的主轴和交叉轴对 .item2 无效。
如何让绝对定位元素与 Flex 布局协同工作
虽然绝对定位元素不参与 flex 布局，但可以通过以下方式实现配合：
- 设置容器为相对定位：使绝对定位子元素相对于容器定位，而不是视口或其他祖先。
- 利用 Flex 容器尺寸进行定位：绝对定位元素可以基于 Flex 容器的最终尺寸进行定位（如右上角、底部居中等）。
- 混合布局策略：用 Flex 布局处理主要结构，用绝对定位处理浮层、角标、遮罩等装饰性或覆盖性内容。
常见使用场景
这种组合在实际开发中很常见：
- 卡片组件中，用 Flex 布局排列标题和内容，用绝对定位放置“收藏”图标或“新”标签。
- 轮播图中，主体内容用 Flex 排列，左右切换按钮使用绝对定位贴在两侧。
- 模态框中，外层用 Flex 实现垂直居中，内部使用绝对定位控制关闭按钮位置。
基本上就这些。关键在于理解：绝对定位元素“看得到”Flex 容器，但“不听从”它的布局指令。只要合理利用这一点，两者可以很好地配合。不复杂但容易忽略的是父容器的 position: relative —— 没有它，绝对定位可能指向错误的参照元素。
