绝对定位元素在Flex容器中不参与弹性排列，因其脱离文档流而不再是flex item，导致justify-content、align-items及flex属性失效，且位置由最近已定位祖先决定；若父容器未设position:relative或高度为0，则top/left计算失真。
绝对定位元素在 Flex 容器中不参与弹性排列，是因为它彻底脱离了文档流 —— 浏览器在计算 flex 项目（flex item）布局时，只考虑仍在流内的子元素。
position: absolute 让元素退出 flex 布局体系
一旦给子元素设 position: absolute，它就不再是 flex item。这意味着：
-
justify-content和align-items对它完全无效 -
flex-grow、flex-shrink、order等属性全部失效 - 它原本占的 flex 空间会被释放，其他子项会自动填补空缺
- 它的位置不再由主轴/交叉轴决定，而是由最近的「已定位祖先」决定
为什么它常跑到 body 顶部左上角？
因为 Flex 容器默认是 position: static，不构成定位上下文。浏览器会继续向上查找，直到找到 body 或 html（它们隐式具有定位上下文）。此时 top: 0; left: 0 就变成相对于视口定位。
验证方法：用 DevTools 选中该元素 → Elements 面板 → 查看 offsetParent 是谁。如果不是你写的父容器，说明定位锚点错了。
立即学习“前端免费学习笔记（深入）”；
父容器 height 为 0 会让 top/left 计算失真
top: 50% 是按父容器的 height 计算的。但如果父容器没设 height 或 min-height，且内部全是 position: absolute 子项（不参与布局），它的高度就是 0px —— 此时 top: 50% 等价于 top: 0。
常见表现：
- 居中代码写了但元素贴顶
-
inset: 0没反应 - 开发者工具里看到父容器
height: auto且实际值为0px
真正容易被忽略的底层前提
所有修复都依赖两个不可省略的动作：父容器必须同时满足
-
position: relative（建立定位上下文） - 有可计算的高度（
min-height、height或至少一个流内子项撑开空间）
漏掉任意一个，top/left 的数值就失去意义 —— 不是代码写错，而是参照物本身不存在或不可量。
