フレックスボックスでシェイプをレイヤーする方法

Question

私は現在、this solutionを私の使用のために変更して使用していますcase specifically here。私が元々デザインを見たとき、私は1つのフレックスボックスコンテナの中に2つのdivを作成すると考えました。右側のdivは右側のzインデックスになります。彼らはお互いの隣に位置しているので、これがすべてで互いの上に私の要素をレイヤーしない

.container { 
 
     display: flex; 
 
     width: 200px; 
 
     flex-direction: row; 
 
    } 
 

 
    .left-side { 
 
     flex: 4; 
 
     background-color: red; 
 
    } 
 

 
    .right-side { 
 
     flex: 1; 
 
     background-color: orange; 
 
     z-index: 3; 
 
     border-style: 2px solid white; 
 
     border-radius: 50%; 
 
    }

<div class="container"> 
 
     <div class="left-side"> 
 
     View Cart 
 
     </div> 
 
     <div class="right-side"> 
 
     3 
 
     </div> 
 
    </div>

何かのように...。 私の質問は、

私は一緒にハッキングしている位置の絶対/位置の相対的な解決なしに、フレックスボックスのすべての素晴らしい位置を利用しながら、レイヤードレイアウトを使用することができますか？または、私の問題を解決するために、このポジションが絶対的/相対的な正しい方法ですか？

Answer 1

あなたはコンテナに赤い背景を適用し、その効果をやってのけるために容器の外側オレンジ色の円の半分の方法を移動するためにtransform: translateX(50%)を使用することができます。

.container { 
 
    display: flex; 
 
    width: 200px; 
 
    flex-direction: row; 
 
    background: red; 
 
    position: relative; 
 
    color: white; 
 
} 
 

 
.container:before { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    content: ''; 
 
} 
 

 
.container:before, 
 
.count { 
 
    border: 2px solid white; 
 
} 
 

 
.left-side { 
 
    flex-grow: 1; 
 
} 
 

 
.center { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.count { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: orange; 
 
    border-radius: 50%; 
 
    transform: translateX(50%); 
 
}

<div class="container"> 
 
    <div class="left-side center"> 
 
    View Cart 
 
    </div> 
 
    <div class="right-side"> 
 
    <div class="count center">3</div> 
 
    </div> 
 
</div>

Answer 2

負のマージン

あなたが位置絶対/相対溶液を使用せずに問題を解決するために、負のマージンを使用することができます。

.container { 
 
     display: flex; 
 
     width: 200px; 
 
     flex-direction: row; 
 
    } 
 

 
    .left-side { 
 
     flex: 4; 
 
     background-color: red; 
 
    } 
 

 
    .right-side { 
 
     flex: 1; 
 
     background-color: orange; 
 
     z-index: 3; 
 
     border-style: 2px solid white; 
 
     border-radius: 50%; 
 
     margin-left: -60px; 
 
     text-align: center; 
 
    }

<div class="container"> 
 
     <div class="left-side"> 
 
     View Cart 
 
     </div> 
 
     <div class="right-side"> 
 
     3 
 
     </div> 
 
    </div>