绝对定位元素在flex容器内失效是因为flex容器未设position属性，需显式添加position: relative；优先用margin: auto实现贴边居中，align-self有效而justify-self无效；尺寸冲突时用padding或inset留白。
绝对定位元素在 flex 容器内失效？先确认父容器的 position 值
flex 容器本身不会自动成为定位上下文（containing block），position: absolute 的子元素仍会相对于最近的已定位祖先（即 position 为 relative、absolute、fixed 或 sticky 的祖先）定位。如果父 flex 容器没设 position: relative，它就“透明”了，绝对定位元素可能飞到 body 上去。
常见错误现象：top: 0; right: 0 不生效，或定位偏移完全不符合预期。
- 给 flex 容器显式加
position: relative（最常用且安全） - 避免只依赖
display: flex就以为它能当定位锚点 - 若 flex 容器本身是
position: absolute，则无需额外加relative，但需注意层级嵌套带来的定位链变化
用 margin: auto 替代绝对定位实现居中 —— 更符合 flex 本意
想让某个子元素在 flex 容器中“右上角固定”，第一反应可能是 position: absolute。但其实多数场景下，margin: auto 配合 flex 主轴/交叉轴对齐更轻量、更响应、不脱离文档流。
使用场景：图标按钮、关闭叉、状态徽标等需要贴边但又需随内容弹性缩放的元素。
立即学习“前端免费学习笔记（深入）”；
- 确保该子元素是 flex 容器的直接子项（非嵌套）
- 设置
margin-left: auto可将其推到行末；margin-top: auto推到底部；组合使用可精准控制二维位置 - 比绝对定位更易维护：不依赖父级
position，不触发重排阻塞，支持 flex-wrap 自适应 - 注意：
margin: auto在单行 flex 中有效；多行（flex-wrap: wrap）时行为受限，此时才考虑退回到绝对定位
align-self 和 justify-self 能不能替代绝对定位？
align-self 是有效的，justify-self 在 flex 布局中**无效**（它是 Grid 布局的属性）。别被编辑器自动补全骗了。
