Flex容器需显式设position: relative才能为absolute子元素提供定位锚点；absolute元素脱离Flex流，不响应justify-content/align-items，且可能因容器高度塌陷而不可见。
Flex容器没设position: relative，absolute元素就找不到定位锚点
绝对定位元素的top、left等值，永远相对于「最近的已定位祖先」计算——即position为relative、absolute、fixed或sticky的父级。Flex容器默认是position: static，它不构成定位上下文。
常见错误现象：top: 0; right: 0写得再准，元素也飘到整个视口右上角；top: 50%本想对齐Flex容器中线，结果按body高度算，偏移巨大。
- 必须给Flex容器显式加
position: relative（哪怕其他样式不变） - 不要依赖
display: flex自动提供定位能力——它和position无关 - 如果Flex容器本身已是
position: absolute或fixed，那它天然就是定位上下文，无需额外加relative
position: absolute子元素不响应justify-content和align-items
一旦子元素设了position: absolute，它就不再是flex item：不占空间、不响应order、不被flex-grow拉伸，justify-content和align-items对它完全无效。它的位置只由自身top/left和父级的定位上下文决定。
别试图用justify-content: center去“修正”一个absolute元素的位置——它根本收不到这个指令。
立即学习“前端免费学习笔记（深入）”；
- 想水平居中？用
left: 50%; transform: translateX(-50%) - 想右上角贴边？确保Flex容器有明确宽高，并用
top: 0; right: 0 - 若Flex容器高度由内容撑开，而
absolute元素又需固定在底部，得手动设min-height或预留padding
Flex容器高度塌陷导致absolute元素“消失”
因为所有子项都是position: absolute，没有一个普通流元素撑开容器高度，此时Flex容器的height计算结果为0px，而top: 50%的50% 就是 0，元素实际贴在顶部不可见。
检查DevTools → Computed → 看父容器的height是否为auto或0。
- 临时加一个空的普通流子元素：
<div></div> - 或设
min-height: 100vh/height: fit-content - 避免硬写固定
height: 300px，响应式场景下容易断裂
想让absolute元素“看起来参与布局”，但又不破坏Flex流
别让它当Flex子项，改用wrapper包裹：把position: relative加在真正参与Flex布局的父级上（比如卡片容器），再让absolute元素相对这个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自动分配空间，要么手动接管位置与尺寸，不能一边喊“请居中”，一边又把它从布局里拎出去。
