先记住这个答案
给 flex 容器里的子元素加上 position: absolute，这个元素就从 flex 布局里「消失」了。它不占主轴空间，其余子项的 flex-grow、flex-shrink 计算完全忽略它。同时如果 flex 容器自身设了 position: relative，它依然充当绝对定位元素的包含块，偏移量从容器的 padding 边开始算。
- 绝对定位子项脱离 flex 排列
- 不参与伸缩也不占主轴空间
- 容器仍可做它的包含块
justify-content影响静态位置
绝对定位子项在 flex 容器里是怎么表现的
假设一个水平方向的 flex 容器里有三个子项 A、B、C，B 设了 position: absolute。浏览器排列时只看 A 和 C，B 对它俩没有任何影响。A 和 C 的尺寸、间距、对齐都按「只有两个子项」来算。
.container {
display: flex;
position: relative; /* 让自己成为绝对定位子项的包含块 */
height: 200px;
}
.badge {
position: absolute;
top: 8px;
right: 8px; /* 相对容器 padding 边定位 */
}
.item {
flex: 1; /* A 和 C 平分空间，badge 不影响 */
}这是最常见的做法：在 flex 容器右上角放一个角标。角标不参与弹性分配，布局干净。
没写偏移量时的「静态位置」
如果绝对定位子项没有设 top、left、right、bottom 任何一个，它并不会跑到容器左上角。规范规定，它待在「假装自己还在正常流里」会出现的位置，这叫静态位置。
在 flex 容器中，这个静态位置会受 justify-content 和 align-items 的影响。比如容器设了 justify-content: center，绝对定位子项在没有偏移量时会出现在主轴居中的位置。这个行为在调试时经常让人困惑：明明设了绝对定位，元素怎么跟着对齐方式跑？
不过一旦写了任何一个偏移属性，静态位置就不起作用了。所以实际项目里几乎都会显式写偏移量，静态位置更多是面试考点。
容易答错的地方
- 以为绝对定位子项不受容器影响
- 没写偏移量时，静态位置确实会受
justify-content和align-items的影响。只有显式写了top、left等偏移量，元素才完全按偏移量定位。 - 忘了给容器加
position: relative - 如果容器没有设定位上下文，绝对定位子项会去找更上层的定位祖先。这时候它的
top、left就不是相对 flex 容器算的了，布局会跑偏。
面试官还会怎么问？
order 属性对绝对定位子项有效吗？
无效。order 控制的是 flex 行内的排列顺序，绝对定位子项已经不在 flex 行里了，设了也没有任何视觉效果。如果想改变绝对定位元素的层叠顺序，用 z-index。
flex-grow 设了 1 的绝对定位子项会撑开吗？
不会。绝对定位子项的 flex-grow、flex-shrink、flex-basis 全部被忽略。它的尺寸由自身的 width、height 或内容决定。
flex 容器里的 position: fixed 子项呢？
fixed 定位的包含块是视口，或者最近的设了 transform 或 filter 的祖先元素，跟 flex 容器的 position: relative 无关。它同样不参与 flex 排列，但偏移量相对视口算，不是相对容器。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。