绝对定位元素在 flex 容器中不参与 flex 布局，因其脱离文档流、不被视为 flex item，故 justify-content 等属性失效；需设容器 position: relative 以提供包含块，并手动设置宽高，避免 overflow: hidden 或 transform 导致裁剪或定位偏移。
绝对定位元素在 Flex 容器中“不听使唤”，不是 bug，而是 CSS 规范明确规定的布局行为：它压根就不再属于 Flex 布局流程。
absolute 元素为什么脱离 flex 流？
一旦元素设了 position: absolute，浏览器在布局阶段会直接跳过它对 flex 格式化上下文（flex formatting context）的参与。这意味着：
-
justify-content、align-items、align-self、order、flex-grow、flex-shrink全部失效 - 它不占主轴/交叉轴空间，不影响其他 flex item 的排列
- 它不再被计算为 flex item，DOM 中存在，但布局引擎“视而不见”
这不是 Flexbox 的缺陷，而是 position: absolute 本身的语义——脱离文档流、寻找包含块（containing block）进行定位。
定位参考系为什么不是 Flex 容器？
Flex 容器默认是 position: static，而 absolute 元素的包含块只认「最近的已定位祖先」（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）。如果没找到，就会一路向上，最终可能以 body 或 html 为参考。
常见错误现象：top: 0; left: 0 的元素贴到了整个页面左上角，而不是 Flex 容器左上角。
解决方法只有一个：给 Flex 容器显式加 position: relative（哪怕它原本只是 display: flex）。
注意：position: relative 不影响 Flex 容器自身的布局行为，只提供一个可靠的定位锚点。
为什么 absolute 子项宽高经常是 0？
因为 absolute 元素默认宽高由内容决定，且不继承父容器的 flex-basis 或自动拉伸逻辑。当内容为空、子元素也 absolute、或文本未换行时，计算出的尺寸就是 0×0。
典型表现：DOM 可见，但页面上完全看不到；检查 computed styles 发现 width 和 height 都是 auto 且值为 0。
必须手动设置尺寸，例如：
-
width: 100%（相对包含块宽度） -
height: 2em或min-height: 32px - 用
inset（如inset: 0）配合width/height控制
为什么 overflow: hidden 会让 absolute 元素“消失”？
Flex 容器若设置了 overflow: hidden，它会创建一个新的剪裁边界（clipping boundary），所有超出该容器 padding box 的 absolute 子元素都会被裁掉——哪怕它的 top/right 值在逻辑上“应该可见”。
更隐蔽的问题是：transform（如 scale、rotate）也会触发新的包含块和剪裁行为，导致定位坐标按变换后空间计算。
调试建议：
- 临时删掉
overflow: hidden看是否恢复显示 - 检查父级是否有
transform或clip-path - 确保容器有明确高度来源（
height、min-height、内容撑开等），否则bottom: 0类定位会失效
最易被忽略的是：Flex 容器的 height: min-content 或 min-height: auto 在内容未加载完成时会导致高度塌缩，让依赖容器尺寸的定位彻底失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
