CSS - 锚点移动显示：flex 和位置：绝对

Question

我有一个 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>

Answer 1

将 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);
}

  
A
  
B
  
C

Answer 2

它出现在 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);
}

  
A
  
B
  
C