flex容器需显式设position: relative才能作为absolute子元素的定位上下文，否则absolute元素会向上寻找最近定位祖先；absolute子项脱离flex流，所有flex属性失效，且受父容器overflow、transform和高度影响。
Flex容器必须显式加position: relative
不加这句，position: absolute子元素会跳过Flex容器，直接往上找最近的position: relative、absolute、fixed或sticky祖先——大概率落到body上。常见现象：右上角角标贴到整个视口右上角，而不是你期望的卡片右上角。
这不是Flex的bug，是CSS规范行为：display: flex本身不创建定位上下文（containing block），只有显式设置position非static值才行。
- 如果Flex容器本身已是
position: absolute或fixed，那它天然具备定位上下文，无需额外加relative - 别在父级Flex容器上写
position: relative后，又在子元素上写justify-content: flex-end指望右对齐——后者对absolute子项完全无效 - 多个嵌套Flex时，确保你要锚定的那层容器加了
position: relative，中间某层意外加了relative会导致定位被“劫持”
position: absolute子项彻底脱离Flex流
一旦子元素设了position: absolute，它就不再是Flex项目，所有Flex相关属性全部失效：
-
justify-content、align-items、flex-grow、order、align-self全无作用 - 它不占空间，兄弟元素会无视其存在，重新分配剩余空间
- 不能同时写
flex: 1和position: absolute——后者覆盖前者，但计算仍按脱离流处理
典型误用：justify-content: center + position: absolute想让元素居中，结果毫无反应。真要居中，得靠top: 50% + left: 50% + transform: translate(-50%, -50%)，或inset: 0 + margin: auto（前提是四边offset明确、宽高固定）。
容器尺寸与overflow直接影响absolute可见性
absolute元素虽脱离流，但仍受父容器的overflow、transform、height等影响：
-
overflow: hidden会直接裁掉超出边界的absolute子项，哪怕它逻辑上在容器内 - 父容器有
transform（如scale(0.9)）会创建新包含块，导致top/left按变换后坐标系计算，位置飘移 - 若Flex容器高度由内容撑开，而内部全是
absolute子项，容器实际高度可能为0，此时top: 50%就是0，元素“消失”
务必确保容器有可计算高度来源：固定height、min-height、padding，或至少有一个非absolute子项撑开高度。
用Flex控制结构，用absolute做局部微调
真正稳定的组合不是“用Flex居中absolute元素”，而是让Flex管整体布局，absolute只负责局部浮动元素（如关闭按钮、角标、加载指示器）：
- 弹窗遮罩层用
display: flex+justify-content: center+align-items: center居中主内容区 - 主内容区自身设
position: relative，再把关闭按钮设为position: absolute放在右上角 - 避免在
.modal-content上再写display: flex后又给子元素加absolute——等于主动放弃Flex的居中能力
最常被忽略的点是：Flex和定位不是互斥工具，而是分工明确——Flex负责“怎么分空间”，position负责“怎么放内容”。混用时，谁该脱离流、谁该留着占位，必须提前想清楚。否则调试时问题会非常隐蔽：看起来是定位偏了，实际是父容器高度塌缩或定位锚点错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
