Flex容器未设position: relative时，absolute子项会向上查找定位上下文，若未找到则以body为锚点；其高度为0会导致top: 50%失效；需配合transform: translate(-50%, -50%)实现视觉居中，且absolute子项完全脱离Flex流，flex属性对其无效。
Flex容器没设position: relative，absolute子项找不到定位锚点
Flex容器默认是position: static，不构成CSS规范中的「定位上下文」（containing block）。position: absolute元素会向上查找最近的relative、absolute、fixed或sticky祖先——如果没找到，就落到body上。你写的top: 10px实际变成距视口顶部10px，而不是距Flex容器顶部。
- 用DevTools选中absolute元素 → Elements面板 → 查看
offsetParent是谁，立刻确认参照对象是否正确 - 中间某层意外加了
position: relative或transform（如scale(0.9)），会“截胡”成为新定位上下文，导致错位 - 如果Flex容器本身已是
position: absolute或fixed，天然具备定位上下文，无需额外加relative
top: 50%居中失效，常因父容器高度为0或不可计算
top: 50%按父容器的height计算。而Flex容器若没设height或min-height，且内部全是position: absolute子项（不参与布局），它的计算高度就是0——此时top: 50%等价于top: 0，元素“消失”或贴顶。
- 检查computed
height是否为0，这是定位失效最常被忽略的底层原因 - 避免仅靠
height: auto或height: 100vh（iOS Safari地址栏变化时vh不实时更新） - 优先用
min-height: 100dvh，或留一个普通流子项撑高，或设min-height: fit-content
top: 50%; left: 50%不等于视觉居中，漏掉transform: translate(-50%, -50%)
top: 50%; left: 50%只是把元素左上角挪到父容器中心点，不是让整个元素视觉居中。常见现象：元素右下角伸出容器、看起来明显偏右偏下。
- 必须补上
transform: translate(-50%, -50%)，才能以自身宽高为基准回拉一半 -
transform的百分比是相对于元素自己，宽高动态变化时依然可靠 - 别写成
transform: translate(-50px, -50px)——固定像素无法适配变化的尺寸 -
margin: auto在absolute上下文中需top/right/bottom/left全设确定值+宽高固定，缺一不可，和flex对齐逻辑冲突
absolute子项彻底脱离Flex流，所有flex属性全部失效
一旦子元素设了position: absolute，它就不再是Flex项目：justify-content、align-items、flex-grow、order、align-self对它完全无影响。它不占空间，兄弟元素会无视其存在，重新分配剩余空间。
立即学习“前端免费学习笔记（深入）”；
- 典型误用：
justify-content: flex-end又同时给子项加position: absolute，指望右对齐——毫无反应 - 在同一个元素上同时写
flex: 1和position: absolute——后者覆盖前者，但计算时仍按脱离流处理 - 想实现类似效果，应改用：
right: 10px（右上角固定）、inset: 0（填满父容器，比top: 0; left: 0; right: 0; bottom: 0更简洁） - 父容器的
overflow: hidden会直接裁掉超出边界的absolute子项
position: absolute。这种混合用法会让问题变得隐蔽且难复现。 
