flex容器需显式设position: relative才能作为absolute子元素的定位锚点，否则absolute元素将相对于最近已定位祖先（如body）定位；设为relative后，absolute子元素脱离文档流，不受justify-content等flex属性影响。
Flex容器没设position: relative，absolute子元素就找不到定位锚点
绝对定位元素的top、left等值不是相对于父容器的content box，而是相对于「最近的已定位祖先」——即position为relative、absolute、fixed或sticky的祖先。Flex容器默认是position: static，它不构成定位上下文，所以浏览器会继续往上找，常落到body甚至html上。
常见错误现象：top: 0; right: 0写得再准，元素也飘到整个视口右上角；top: 50%本想对齐Flex容器中线，结果按body高度算，偏移巨大。
- 必须给Flex容器显式加
position: relative（哪怕其他样式不变） - 不要依赖
display: flex自动提供定位能力——它和position无关 - 如果Flex容器本身已是
position: absolute或fixed，那它天然就是定位上下文，无需额外加relative
加了position: relative后，absolute子元素仍不受justify-content控制
一旦子元素设了position: absolute，它就不再是flex item：不占空间、不响应order、不被flex-grow拉伸，justify-content和align-items对它完全无效。它的位置只由自身top/left和父级的定位上下文决定。
别试图用justify-content: center去“修正”一个absolute元素的位置——它根本收不到这个指令。
- 想水平居中？用
left: 50%; transform: translateX(-50%) - 想右上角贴边？确保Flex容器有明确宽高，并用
top: 0; right: 0 - 若Flex容器高度由内容撑开，而absolute元素又需固定在底部，得手动设
min-height或预留padding
relative父级的高度塌陷会导致absolute定位失效
如果Flex容器只写了min-height: 100vh或height: 100%，但内部没有足够内容撑开高度，它的实际渲染高度可能为0。此时top: 50%就是按0计算，元素直接消失或错位。
移动端尤其敏感：iOS Safari对100%解析不稳定，100vh在地址栏显示/隐藏时还会跳变。
- 需要可靠垂直居中时，优先用
position: fixed+width: 100vw; height: 100vh - 若必须用relative父级，显式设
height: 100vh（非%），并确认父级能继承高度 - 避免在relative父级上同时加
transform（如scale(1)），这会创建新的包含块，干扰absolute定位参考系
absolute子元素覆盖flex内容时，z-index可能不生效
z-index只在「已定位元素」间生效。如果Flex容器没设position: relative，它的z-index不会创建层叠上下文，absolute子元素的层级就可能和兄弟flex item混在一起，出现遮挡异常。
更隐蔽的是：某些UI库或框架的组件自带transform，也会隐式创建层叠上下文，导致你的z-index被截断。
- 给Flex容器加
position: relative的同时，务必配一个z-index（哪怕只是1） - absolute子元素的
z-index要大于容器的值，才能确保盖在上面 - 避免在同一个元素上同时写
flex: 1和position: absolute——后者会覆盖前者，但开发者常误以为两者共存
overflow: hidden意外裁剪——任何让它“不可见”或“不可测”的操作，都会让absolute子元素瞬间失去锚点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
