フレックスボックスコンテナは絶対に配置することができます

Question

1つのフレックスコンテナ（A）を他のフレックスコンテナ（B）の前後に絶対に配置でき、

私の問題：flex-container（B）をposition：absoluteに割り当てると、内部の子コンテンツは自動flexプロパティを失います。 position：relativeに切り替えると、flexは再び動作します。コンテナ（B）が相対的な場合、私は必要なように他のフレックスコンテナ（A）の上にオーバーレイすることはできません。

リサーチ：親フレックスコンテナ（W3CとCSSトリックなど）の子供の絶対的な配置に関するすべてのものを見つけましたが、コンフレックスコンテナが他のフレックスコンテナ上に完全に移動しているとは限りません。 ）。もしそうなら、私は喜んで転がります。

究極の目標：隣接するフレックスコンテナの上に、異なるZ-インデックスを持つフレックスコンテナをオーバーレイしたいとします。

ありがとうございます。

Answer 1

元のコードがどのように見えるかわからないので、フレックスコンテナが別のものの上に絶対配置されている一般的なレイアウトがあります。絶対位置と

position: absolute要素がその兄弟として揃えるようにするには、私はそれらの両方を包み、二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>