Flex容器需设position: relative才能为absolute子元素提供定位上下文，否则absolute元素会向上寻找定位祖先导致错位；右对齐优先用margin-left: auto而非absolute；必要时应分层处理，避免在Flex容器上直接使用absolute。
Flex容器里加position: relative是绝对定位的前提
不设这个，position: absolute的子元素会往上找最近的定位祖先——大概率落到body或html上，结果就是按钮飞出卡片、浮层贴着视口右上角乱飘。常见错误是只给子元素加absolute，却忘了父容器必须显式声明position: relative。
真正该写的结构是：
.container {
display: flex;
position: relative; /* 关键：提供定位上下文 */
}
.overlay-btn {
position: absolute;
top: 12px;
right: 12px;
}- 只要
.overlay-btn不是 Flex item（即不参与flex空间分配），它就该被包在position: relative的容器里 - 别把
absolute元素直接塞进display: flex的根容器当子项——它会消失在 Flex 计算之外，还可能压住其他 Flex 项目 - 移动端 Safari 对未设
position: relative的父容器兼容性更差，尤其滚动时定位偏移明显
margin-left: auto比position: absolute更适合右对齐 Flex 项目
想让一个按钮靠右？别急着写absolute。90% 的场景下，margin-left: auto更稳：
.flex-row {
display: flex;
gap: 8px;
}
.btn-primary {
margin-left: auto; /* 自动吸到行尾 */
}-
margin-left: auto让元素仍保留在文档流中，不影响 Flex 容器高度计算 - 响应式缩放时不会错位；字体放大后按钮也不会被挤出边界
- 如果同时需要垂直居中+右对齐，用
justify-content: flex-end配align-items: center更干净 - 只有装饰性小图标（如关闭叉、状态标签）才值得用
absolute——它们尺寸固定、不参与交互逻辑、也不影响布局高度
嵌套一层容器再用绝对定位，才能兼顾 Flex 和定位需求
真需要某个模块既保持 Flex 行为，又内部有浮动按钮？别在一个元素上硬叠display: flex和position: absolute。正确做法是分层：
立即学习“前端免费学习笔记（深入）”；
<div class="card">
<div class="card-content"><!-- Flex 容器 -->
<h3>标题</h3>
<p>描述</p>
</div>
<div class="card-actions"><!-- 绝对定位锚点 -->
<button>操作</button>
</div>
</div>.card {
position: relative; /* 锚定内部 absolute 元素 */
}
.card-content {
display: flex;
flex-direction: column;
}
.card-actions {
position: absolute;
bottom: 16px;
right: 16px;
}-
.card-actions脱离文档流，但.card本身仍由内容撑高，不会塌缩 - 避免把
.card-actions写成.card的直接 Flex 子项——否则flex属性对它无效，还可能干扰gap或justify-content - 所有
absolute元素的top/right值建议用固定像素（如12px），别用百分比，否则在不同屏幕宽度下偏移量不一致
移动端表单里混用 Flex 和 absolute 极易导致内容被裁剪
比如body { display: flex; align-items: center; }再给表单加position: absolute; top: 50%; transform: translateY(-50%)——这是典型双重复合居中，移动端必出问题：
- 表单内容变长时，
absolute让它脱离文档流，body无法自动撑高，底部内容被截断且无法滚动 - iOS Safari 渲染
transform+absolute组合时有高度计算误差，常出现顶部留白或底部压黑边 - 解决方法：二选一。要么全用 Flex 居中（删掉所有
position: absolute相关声明），要么全用absolute+transform，但必须确保父容器有position: relative和明确height - 额外检查
* { margin: 20% }这类全局重置——它会直接吃掉表单可用空间，比定位问题更隐蔽
最常被忽略的一点：绝对定位元素的z-index必须显式设置，尤其当它和 Flex 项目有视觉交叠时。不写默认是auto，而auto在 Flex 容器里不创建新层叠上下文，结果就是按钮明明写了absolute，却还是被后面的内容盖住。
