绝对定位元素在flex容器中“飘走”是因为flex容器默认不构成定位上下文，需显式设置position: relative；top: 0失效常因容器高度为0或定位上下文被上级祖先截获；居中需配合transform: translate(-50%, -50%)。
绝对定位元素在 flex 容器里“飘走”，不是代码写错了，而是它压根没把 flex 容器当爹——默认情况下，position: static 的 flex 容器不构成定位上下文，浏览器会一路往上找，大概率锚定到 <body>。
为什么 top: 0 没贴到 flex 容器顶部
因为 top: 0 是相对于父容器的 padding box 上边缘计算的，但 flex 容器若没设 position: relative，就不是它的定位上下文；即使加了，若容器高度为 0（比如内部全是 position: absolute 子项），top: 0 也会失效。
- 用 DevTools 查看该元素的
offsetParent，确认是不是你写的那个 flex 容器 - 检查 flex 容器的 computed
height—— 若是auto或0px，就得补min-height或留一个流式子项撑高 - 别依赖
align-items: center来“视觉修正”位置，它对position: absolute元素完全无效
为什么 top: 50%; left: 50% 还是偏右下
这两个值只是把元素左上角挪到父容器中心点，不是让整个元素居中。你看到的“偏移”，其实是它本该如此。
- 必须搭配
transform: translate(-50%, -50%)—— 百分比基于元素自身宽高，动态内容也不破位 - 不能写成
transform: translate(-50px, -50px)，像素值无法适配变化的尺寸 - 如果父容器有
transform（如scale(0.95)），会创建新包含块，导致坐标系变形，top: 50%基准错乱
为什么加了 position: relative 还不管用
可能被中间某层“截胡”了。只要上级任意祖先也写了 position: relative、absolute 或 fixed，它就会成为新的 offsetParent，而你的 flex 容器反而被跳过了。
立即学习“前端免费学习笔记（深入）”；
- 用 DevTools 的 Elements 面板逐级点开祖先，看谁的
position不是static - 临时给可疑祖先加
outline: 1px dashed red，观察定位参考框是否偏移 - 避免在 flex 容器外层 wrapper 就加
position: relative，除非你明确想让它当锚点
真正卡住的地方，往往不是 flex 写得不对，而是你一边想靠 flex 管理布局，一边又用 position: absolute 强行接管位置——它们逻辑互斥，不能混着指望。
