我有一个 Flex 元素和三个子元素。第二个孩子应该使用绝对位置与第一个孩子重叠，如下所示：
预期：
请注意，第二个子项应位于第一个子项的上方，而不是旁边。
但是，在父级上设置 display: flex 似乎会将绝对元素的锚点或参考点移动到 div 的开头。实际结果是这样的：
实际结果：
将第二个子元素放在第一个或第三个元素中不是一个选项，因为它们有 overflow:scroll。在父级上使用任何其他 display 属性也是如此，因为我的布局依赖于 display: flex。我知道其他帖子中已经建议了这些解决方案，但是，我还没有找到解决这些限制问题的问题/答案。
在第二个孩子上使用除 display:absolute 以外的其他内容也可以，例如负边距，但我也无法使其工作。
如果有人知道这是否可能或有任何建议，我们将不胜感激。
要查看它的实际效果，这里是我的代码，经过简化以演示问题：
body{
color: white;
}
.wrapper{
display: flex;
}
.wrapper .a{
background-color: blue;
flex-grow: 1;
}
.wrapper .b{
position: absolute;
background-color: rgba(255, 0, 0, 0.5);
min-width: 40px;
}
.wrapper .c{
background-color: green;
min-width: 40px;
}
<div class="wrapper"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div>
将
position:relative;添加到父级当一个元素被赋予
position:absolute;属性时，它将通过relative、absolute或fixed定位来针对最近的父元素进行定位。如果没有找到，它将针对body进行定位。在这种情况下，您可能需要将position:relative;添加到.wrapper元素，因为它是绝对定位的参考点。为元素添加定位值
根据定义，
position:absolute;元素将使用特定值集绝对定位。也就是说，距顶部、右侧、底部或/和左侧边缘有多远。当您不提供任何值时，它只会粘在左上角，这就是这里发生的情况。需要设定一个定位值
position:absolute;从正常内容流中获取一个元素。也就是说，它周围的元素不会影响它的大小或位置；因此绝对位置。为了实现图中所示的效果，您需要指定.c元素的宽度，并使用相同的精确值从右边缘定位.b元素。请参阅下面的代码片段以供参考。
body{ color: white; --width: 80px; } .wrapper{ display: flex; position: relative; } .wrapper .a{ background-color: blue; flex-grow: 1; } .wrapper .b{ position: absolute; right: var(--width); background-color: rgba(255, 0, 0, 0.5); min-width: 40px; } .wrapper .c{ background-color: green; width: var(--width); }它出现在 div 的左侧，因为它已从文档的流程中取出。事实上，它实际上是相对于视口而不是父包装器定位的。要使其定位到包装器，请将
position:relative设置为包装器类以创建 新包含块为了确保它与 div 'a' 的末尾重叠，我使用了 'right' 属性将右手边缘向左移动我设置的值 自定义属性，我已将其设置为该属性和 div 'c'。请参阅下面带注释的示例。
.wrapper { position: relative; display: flex; color: white; --element-c-width: 40px; /* set this to both set the width of div 'c' and how far we move div 'b' leftwards */ } .a { background-color: blue; flex-grow: 1; } .b { position: absolute; background-color: rgba(255, 0, 0, 0.5); min-width: 40px; right: var(--element-c-width); /* from the right hand side of the wrapper div, move it leftwards by this value */ } .c { background-color: green; min-width: var(--element-c-width); }