CSS – Ankerpunktverschiebung display:flex und position:absolute

Question

Ich habe ein Flex-Element und drei untergeordnete Elemente. Das zweite Kind sollte das erste Kind überlappen und dabei eine absolute Positionierung wie folgt verwenden:

Erwartet:

Beachten Sie, dass das zweite Kind über dem ersten Kind sein sollte, nicht daneben.

Allerdings scheint die Einstellung display: flex auf dem übergeordneten Element den Ankerpunkt oder Referenzpunkt des absoluten Elements an den Anfang des div zu verschieben. Das tatsächliche Ergebnis ist dieses:

Tatsächliche Ergebnisse:

Das Einfügen des zweiten untergeordneten Elements in das erste oder dritte Element ist keine Option, da diese über overflow:scroll verfügen. Das Gleiche gilt für die Verwendung anderer display-Attribute im übergeordneten Element, da mein Layout auf overflow:scroll。在父级上使用任何其他 display 属性也是如此，因为我的布局依赖于 display: flex basiert. Ich weiß, dass diese Lösungen in anderen Beiträgen vorgeschlagen wurden, ich habe jedoch keine Frage/Antwort gefunden, die diese Einschränkungen anspricht.

Beim zweiten Kind etwas anderes als display:absolute zu verwenden, funktioniert auch, etwa negative Ränder, aber ich bekomme es auch nicht zum Laufen.

Wenn jemand weiß, ob dies möglich ist oder Vorschläge hat, wäre ich sehr dankbar.

Um es in Aktion zu sehen, hier ist mein Code, vereinfacht, um das Problem zu veranschaulichen:

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