我有一个 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>
P粉4269063692024-03-30 21:42:53
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);
}
ABC
P粉4516148342024-03-30 20:39:34
它出现在 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);
}
ABC