Flex容器与absolute元素可共存，但absolute元素脱离文档流，不参与flex布局，其定位依赖最近的已定位祖先（如position: relative的容器），常用于覆盖层或精确定位，需注意父容器设置相对定位以建立包含块。
在使用 CSS 时，Flex 容器和 绝对定位元素（absolute）可以共存，但它们的布局机制不同，需要理解其行为才能正确使用。
flex容器中的absolute元素会脱离文档流
当一个元素设置为 position: absolute; 时，它会从正常的文档流中移除。这意味着：
- 它不再作为 flex 项目参与主轴或交叉轴的排列
- 它不会影响其他 flex 项目的布局
- 它的位置由最近的已定位祖先（relative、absolute、fixed 等）决定，而不是由 flex 的对齐属性控制
例如：
.container {display: flex;
justify-content: center;
align-items: center;
position: relative; /* 关键：为absolute提供定位上下文 */
height: 300px;
}
.item {
width: 100px;
height: 100px;
background: blue;
}
.overlay {
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background: red;
}
这里 .overlay 虽然在 flex 容器内，但它不会受 justify-content 或 align-items 影响，而是根据容器的右上角定位（因为容器有 position: relative）。
立即学习“前端免费学习笔记（深入）”；
absolute元素仍可位于flex容器内部
尽管 absolute 元素脱离了 flex 布局，但仍可以将其放置在 flex 容器中用于：
- 创建覆盖层（如提示图标、角标）
- 实现复杂布局中的局部精确定位
- 不干扰主内容流的装饰性元素
关键是要确保父容器设置了 position: relative，以便 absolute 元素能相对于它定位。
flex项目自身也可以是absolute定位
如果某个 flex 项目本身设置了 position: absolute;，那么：
- 它不再占据 flex 容器中的空间
- 它的原始位置会被“腾空”，其他项目会靠拢
- 它可以通过 top/left/right/bottom 精确控制位置
这种技巧常用于将某个项目从 flex 流中“抽离”但仍保留在结构中（比如模态框、悬浮按钮）。
基本上就这些。只要理解 absolute 会让元素脱离 flex 布局，而 flex 容器仍可作为其定位上下文，两者就能和平共处。关键是合理使用 position: relative 来建立包含块。不复杂但容易忽略。
