绝对定位元素在flex容器中不响应justify-content和align-items，因其脱离文档流；需用top/left+transform或inset+margin:auto居中，并确保父容器设position:relative以提供定位上下文。
绝对定位元素在Flex容器里不认justify-content和align-items
因为绝对定位元素已脱离文档流，Flex的对齐属性只作用于参与布局的子项（即非position: absolute的子元素）。父容器设了display: flex，但对position: absolute的子元素完全无效。
- 想居中一个绝对定位元素？别依赖Flex对齐，改用
top/left+transform，或inset+margin: auto - 如果同时需要Flex布局和某个元素“浮在上面”，建议把绝对定位元素移出Flex容器，用外层相对定位包裹整个Flex区域，再把绝对元素挂载到外层
- 注意：Flex容器的
overflow设置可能裁剪掉溢出的绝对定位子元素，即使它视觉上该显示
position: absolute的top/left参考谁？
参考的是最近的**定位上下文（positioned ancestor）**，不是Flex容器本身——哪怕它有display: flex。如果父元素没设position: relative（或absolute/fixed），就会一路往上找，直到body或根元素。
- 常见错误：Flex容器没加
position: relative，结果top: 0; left: 0把元素钉到了视口左上角 - 正确做法：给Flex父容器显式加上
position: relative，它就成为定位上下文，子元素的top/left才真正相对于它计算 - 注意：
position: sticky不会创建定位上下文，不能作为参考父级
Flex子项设position: absolute后，flex-grow/flex-shrink还起作用吗？
完全不起作用。一旦元素变成绝对定位，它就不再被视为Flex子项，所有Flex相关属性（flex、order、align-self等）全部失效。
- 现象：Flex容器里一个子元素加了
position: absolute，其他子项突然撑满剩余空间，像它“消失”了一样 - 这不是bug，是规范行为：绝对定位元素从Flex formatting context中被移除
- 如果需要“视觉上重叠但逻辑上仍占位”，考虑用
visibility: hidden+z-index替代，而不是position: absolute
用inset代替top/right/bottom/left时的兼容性坑
inset是CSS Level 4的新简写，能统一控制四边偏移，写inset: 0;比top: 0; right: 0; bottom: 0; left: 0;简洁，但它在旧版Safari（iOS 14.5之前）和IE中完全不支持。
立即学习“前端免费学习笔记（深入）”；
- 如果项目需兼容iOS Safari ≤14.4，必须用传统四属性写法，或加
@supports回退 -
inset和margin: auto配合可实现真正的居中（无需transform），但前提是容器有明确宽高且是定位上下文 - 注意：
inset不能和top/left等混用——后者会覆盖前者，浏览器按声明顺序解析，后写的生效
最易忽略的一点：Flex容器的min-height或height未设置时，绝对定位元素可能让容器高度塌陷，看起来“消失”了——其实只是父容器没高度，它还在那里，只是看不见。检查父容器是否真有尺寸，比调子元素更优先。
