align-self对绝对定位元素完全无效，因其已脱离Flex格式化上下文，不再是flex item；它只作用于参与Flex布局的子项，浏览器直接忽略该属性。
align-self 对绝对定位元素完全没影响
它根本不起作用，不是“影响基准”，而是直接被浏览器忽略。因为 align-self 只对参与 Flex 布局的子项生效，而 position: absolute 会让元素彻底退出 Flex 格式化上下文——它不再是 flex item，布局引擎在计算交叉轴对齐时压根不处理它。
常见错误现象：align-self: center 写了但元素纹丝不动，开发者工具里该属性甚至显示为“已应用”，控制台也无报错。这不是浏览器 bug，是 CSS 规范明确行为。
以下情况都会导致 align-self 失效：
- 父容器未设置
display: flex或display: inline-flex - 子元素设置了
position: absolute或float - 子元素写了
margin-top: auto或margin-bottom: auto，会覆盖align-self - 父容器交叉轴尺寸为
auto（例如没设高度，也没内容撑开），align-self: center看不出效果
绝对定位元素的真正定位基准是谁
它的定位只依赖最近的「已定位祖先」，即 position 值为 relative、absolute、fixed 或 sticky 的祖先元素。Flex 容器默认是 position: static，不算已定位，所以它会继续往上找，大概率落到 <body> 上。
立即学习“前端免费学习笔记（深入）”；
解决方法只有一个：给直接包裹该绝对定位元素的 Flex 容器显式加 position: relative。哪怕容器空着、没内容、没高度，也必须加——它只是充当“包含块”（containing block）的锚点，不影响 Flex 自身布局。
容易踩的坑：
- 中间某层祖先意外加了
position: relative，成了新的 offsetParent，导致定位参照错乱 - 父容器虽有
position: relative，但高度为0或min-height: auto，top: 50%计算结果为0px，看起来像没动 - 祖先元素用了
transform（如scale或rotate），在部分浏览器中会创建新的包含块，干扰定位参考系
想居中？别靠 align-self，用 top + left + transform
在 Flex 容器中让绝对定位元素视觉居中，唯一可靠路径是：top: 50% + left: 50% + transform: translate(-50%, -50%)。这和 Flex 无关，纯属绝对定位的常规操作。
但要注意前提：
- 父 Flex 容器必须有
position: relative - 容器得有可计算的高度（比如设了
min-height，或由子内容撑开），否则top: 50%没意义 -
transform: translate()是必需的，只写top: 50%; left: 50%只会让元素左上角落在中心点
如果容器尺寸是动态的（比如图片加载后变化），top/left 不会自动重算，得用 ResizeObserver 监听或换回 Flex 原生方案（如 margin: auto）。
什么时候该放弃绝对定位
如果你发现一边写 display: flex，一边又给子项加 position: absolute，还指望 justify-content 或 align-items 起作用——那问题不在代码，而在思路。这两者语义冲突：Flex 居中靠布局算法自动分配空间；绝对定位靠手动坐标控制位置。
真正需要的，往往是：
- 局部微调（比如头像右上角加个状态点）→ 用
transform或伪元素，不脱离文档流 - 覆盖层/弹窗/Tooltip → 把
position: absolute元素放在 Flex 容器内部，且紧邻兄弟元素，避免层级错乱 - 右对齐、底部对齐等 → 优先用
margin-left: auto或margin-top: auto，它们在 Flex 流中更稳定、更响应式
最常被忽略的一点：Flex 容器自身是否有可预期的高度来源？没有的话，任何基于 top、bottom、align-self 的操作都只是在调试幻觉。
