必须给Flex容器显式加position: relative，否则absolute子元素会相对于body或更外层已定位祖先定位；它脱离Flex流，justify-content等属性全部失效，且需确保容器有可计算高度以支持top: 50%等计算。
必须给 Flex 容器显式加 position: relative，否则 position: absolute 子元素会相对于 body 或更外层已定位祖先定位，而不是你预期的 Flex 容器。
Flex 容器没设 position: relative 就找不到定位锚点
Flex 容器默认是 position: static，它不构成 CSS 规范中的「定位上下文」（containing block）。position: absolute 元素只会向上查找最近的 position: relative、absolute、fixed 或 sticky 祖先。常见错误现象包括：
-
top: 0; right: 0的角标贴到整个视口右上角，而非容器右上角 -
top: 50%按body高度算，结果严重偏移 - 多个嵌套 Flex 容器中，absolute 元素意外被外层容器捕获定位
解决方法很简单：
- 给直接包裹 absolute 子项的 Flex 容器加
position: relative（哪怕其他样式不变） - 如果该容器本身已是
position: absolute或fixed，则天然具备定位上下文，无需额外加relative - 别指望
display: flex自动提供定位能力——它和position属于完全独立的机制
position: absolute 子项彻底脱离 Flex 流
一旦子元素设了 position: absolute，它就不再是 Flex 项目，所有 Flex 相关属性全部失效：
立即学习“前端免费学习笔记（深入）”；
-
justify-content、align-items、flex-grow、order、align-self对它完全无影响 - 它不占空间，兄弟元素会无视其存在，重新分配剩余空间
- 它的位置只由自身
top/left等 offset 值 + 父级定位上下文决定
典型误用：
- 写
justify-content: flex-end又同时给子项加position: absolute，指望右对齐——毫无反应 - 在同一个元素上同时写
flex: 1和position: absolute——后者覆盖前者，但计算时仍按脱离流处理
想实现类似效果，应改用：
- 右上角固定：用
top: 10px; right: 10px - 水平居中：用
left: 50%; transform: translateX(-50%) - 填满父容器：用
inset: 0（比top: 0; left: 0; right: 0; bottom: 0更简洁）
容器尺寸与溢出行为直接影响 absolute 元素可见性
absolute 元素虽脱离流，但仍受父容器的 overflow、transform、height 等影响：
-
overflow: hidden会直接裁掉超出边界的 absolute 子项 - 父容器有
transform（如scale(0.9)）会创建新包含块，导致定位坐标系偏移 - 若 Flex 容器高度由内容撑开，而内部全是 absolute 子项，容器实际高度可能为
0，此时top: 50%就是0，元素“消失”
确保容器有可计算高度的方法：
- 显式设置
height、min-height（如min-height: 100vh） - 加一个空的普通流子元素占位：
<div style="height: 0"></div> - 用
padding或border提供最小尺寸来源
真正需要 absolute 时，优先让它嵌套在参与 Flex 布局的 wrapper 内
与其让 absolute 元素直接作为 Flex 子项，不如把它放进一个「既参与 Flex 布局、又提供定位上下文」的 wrapper 中：
- 错误写法：
<div class="flex"><div class="abs"></div></div>（.flex没position: relative） - 正确写法：
<div class="flex"><div class="card" style="position: relative;"><div class="abs"></div></div></div>
这样 .abs 相对于 .card 定位，而 .card 仍是正常 Flex 项目，宽度、对齐、顺序全受控。这也是弹窗、卡片徽章、头像状态标等场景最稳妥的组织方式。
最容易被忽略的是：absolute 和 Flex 是互斥的两种控制逻辑——你要么交给 Flex 自动分配空间，要么手动接管位置与尺寸，不能一边喊“请居中”，一边又把它从布局里拎出去。
