Flex容器需显式设position: relative才能作为absolute子项的定位起点；否则子项会向上查找最近定位祖先，导致偏移失效、z-index异常及布局错乱。
Flex容器必须显式设position: relative
不加这句，position: absolute子项根本不会以它为定位起点——浏览器会往上找最近的position: relative、absolute或fixed祖先，大概率落到body上。你写的top: 8px; right: 12px就全按视口算，而不是容器右上角。
常见错误现象：.badge明明写在.card里，却飘到整个页面右上角；z-index失效，盖不住兄弟元素。
正确做法：
- 给真正要当“覆盖锚点”的父容器加
position: relative（比如.card），不是给外层display: flex容器加（除非你真想让它当锚点） - 若该父容器本身已是
position: absolute或fixed，则无需额外加relative - 避免在
display: flex容器上只写flex属性就以为它能当定位上下文——CSS规范没这回事
absolute子项不响应任何Flex属性
一旦加了position: absolute，它就不再是flex item：不占空间、不参与justify-content对齐、无视align-self、order和flex-grow全部归零。你给它写margin-left: auto或justify-content: flex-end都毫无反应。
立即学习“前端免费学习笔记（深入）”；
典型误用场景：
- 想让角标贴右上角，却在
.card上写justify-content: flex-end再给.badge加absolute——结果.badge还在左上角 - 给
.badge同时写flex: 1和position: absolute——flex: 1被忽略，但开发者误以为它还在拉伸 - 期望
.badge随.card内容宽度变化而自动右移，却没意识到它的right是固定值，不会重算
覆盖位置精准对齐的关键是显式偏移 + 尺寸控制
不要依赖margin: auto居中——它只在top/left/right/bottom四边都明确设置时才生效，且要求父容器是定位上下文。更可靠的是手动组合偏移与变换：
- 右上角固定间距：
top: 8px; right: 12px;（前提是.card有明确宽高，且overflow: hidden没裁掉它） - 水平垂直居中：
top: 50%; left: 50%; transform: translate(-50%, -50%); - 填满父容器：
inset: 0;比写top: 0; left: 0; right: 0; bottom: 0;更简洁 - 若
.card高度由内容撑开，而.badge需固定在底部，得确保.card有min-height或padding-bottom，否则bottom: 0会落在0像素处
动态内容下容易失效的三个隐藏条件
React/Vue里渲染后，.card尺寸可能异步变化（图片加载、字体加载、响应式重排），但absolute定位是静态计算的，不会自动重算。最常被忽略的是：
-
.card的height是auto或min-content，导致实际高度塌缩，bottom: 0失效 -
.card上有transform（如scale(0.95)），会创建新包含块，top/left按变换后坐标系计算，位置偏移 -
.card设了overflow: hidden，而.badge稍超出边界就被裁剪——DevTools里看computed样式，overflow值常被继承或重置
真需要跟随尺寸变化，别只读一次offsetWidth就设left；要么用ResizeObserver监听，要么改用position: fixed + getBoundingClientRect()手动同步。但更稳妥的做法是：优先用margin-left: auto或text-align: right实现视觉覆盖效果，仅当必须脱离流（比如遮罩、拖拽手柄）时才上absolute。
