Kann ein Flexbox-Container absolut positioniert werden?

Question

Kann ein Flexcontainer (A) absolut vor oder hinter einem anderen Flexcontainer (B) positioniert werden und trotzdem die Flexeigenschaften seiner Kinder beibehalten?

Mein Problem: Wenn ich einen Flex-Container (B) der Position: absolute zuweisen, verlieren die untergeordneten Inhalte die automatischen Flex-Eigenschaften. Wenn ich zurück in Position: relativ gehe, funktioniert Flex wieder. Wenn der Behälter (B) relativ ist, kann ich den anderen flexiblen Behälter (A) nicht wie gewünscht überlagern.

Forschung: Fanden alles auf absolute Positionierung von Kindern in Eltern Flex Containern (W3C und CSS-Tricks, etc.), aber nichts spezifisch genug, Flex Container absolut über einen anderen Flex-Container bewegt werden (was mich fragt, ob es überhaupt möglich ist!). Wenn das so ist, werde ich mich freuen.

Ultimatives Ziel: Sie möchten einen benachbarten Flex-Container gegenüber einem anderen mit anderen Z-Indizes überlagern.

Vielen Dank im Voraus.

Answer 1

Da wir nicht wissen, wie Ihr ursprünglicher Code aussieht, ist hier ein generelles Layout mit einem Flex Container, der absolut übereinander positioniert ist.

Um das position: absolute Element als seine Geschwister machen ausrichten, wickelte ich sie beide und gab den zweiten width: 100%

.wrap { 
 
    position: relative; 
 
} 
 
.a, .b { 
 
    display: flex; 
 
    height: 120px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.a { 
 
    background: red; 
 
} 
 
.b { 
 
    position: absolute; 
 
    top: 50px; 
 
    height: 50px; 
 
    width: 100%; 
 
    background: blue; 
 
} 
 
.wrap > div > div { 
 
    flex: 1; 
 
    padding: 20px 50px; 
 
    margin: 5px; 
 
    background: green; 
 
} 
 
.wrap div div:first-child { 
 
    flex-basis: 50%; 
 
}

<div class="wrap"> 
 
    <div class="a"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 

 
    <div class="b"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
</div>