absolute子项脱离flex流，不响应flex对齐、排序和伸缩规则；需为容器设position:relative才能成为定位上下文，并显式设置宽高或inset值。
它不认 flex 的对齐规则，也不占 flex 空间——不是 bug，是脱离文档流后的必然表现。
为什么 top/left 在 flex 容器里没反应？
因为 position: absolute 元素只认「最近的已定位祖先」作为参考系，而 flex 容器默认是 position: static，根本不算“已定位”。结果就是它往上一直找，最后可能相对于 body 定位。
- 必须给 flex 容器显式加
position: relative（或其他非static值），才能让它成为定位上下文 - 只加
display: flex不够，position属性不继承，也不被 flex 自动赋予 - 如果容器本身有
transform或overflow: hidden，还会进一步影响定位范围或裁剪效果
align-items 和 justify-content 对 absolute 子项完全无效
这些属性只作用于参与 flex 流的子项。一旦设了 position: absolute，该元素就不再是 flex item，flex 容器直接“看不见”它。
-
align-items: center不会让它垂直居中，得靠top: 50%+transform: translateY(-50%) -
justify-content: flex-end不会让它贴右，得用right: 0或inset: 0 0 auto auto - 它不响应
order、不被flex-grow拉伸、也不受gap影响
为什么 absolute 子项宽高变成 0？
这是最常被忽略的视觉消失原因：absolute 元素默认宽高由内容撑开，但若里面空、文本没换行、或子元素也 absolute，就会塌缩成 0×0。
- 必须显式设置
width/height（如width: 100%、height: 2em） - 或用
inset（如inset: 0）替代top/right/bottom/left，自动撑满父容器 - 注意：即使父容器是 flex，
width: 100%仍指其 containing block 的宽度，不是 flex item 的计算宽度
flex-direction 对 absolute 元素毫无影响
top 永远是上边界，left 永远是左边界，不管父容器是 row 还是 column。它彻底脱离 flex 排列逻辑。
-
flex-direction: column不会让top: 10px变成“向下偏移”，它还是从顶部往下量 10px - 想让它“跟着 flex 主轴走”，就得手动监听容器尺寸变化，或改用
position: fixed+getBoundingClientRect() - 响应式场景下，固定像素偏移（如
right: 12px）容易在小屏错位，建议优先用transform或相对单位
最容易漏掉的是容器自身有没有可计算的高度——如果 flex 容器 height: auto 且没内容撑开，那 top: 50% 就没意义；同样，inset: 0 也会因父容器无明确尺寸而失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
