兄弟の子供たちの溢れた服従

Question

私は白い円とロゴを表す円のdivを持っています。私はそれが欲しかったようです。

<div class="whiteCircle"> 
    <div class="image" style="background-image: url('https://www.postnl.nl/Images/marker-groen-PostNL_tcm10-72617.png?version=1');"></div> 
</div> 

.whiteCircle { 
    width: 65px; 
    height: 65px; 
    background-color: white; 
    border-radius: 50px; 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
} 

その後、私は他のコンテンツのため、whiteBoxに兄弟として別の矩形のdivを作成しました。

<div class="box"> 
    <div class="text"> 
    <h2>Heading</h2> 
    </div> 
</div> 

私はwhiteBoxの上の見出しを移動する方法を見つけ出すことができませんでしたが、両方の親の位置は大丈夫に見えます。私はz-indexの組み合わせで演奏しましたが、子供のZ-インデックスと親を同時に調整することはできません。

私は間違っていますか？それを達成する正しい方法は何ですか？

https://codepen.io/anon/pen/mwKrdG

Answer 1

1 - あなたの親のdivからz-indexを削除します。
2ホワイトボックスのdivにz-indexを追加します。私は20という値を選択します。 3 .textクラスを絶対配置し、そのZ-インデックスが20より大きいかどうかを確認します。

CSS平均この場合の 'の上に' '`whiteBox`上記'

body { 
    background-color: lightblue; 
} 

.whiteBox { 
    width: 65px; 
    height: 65px; 
    background-color: white; 
    border-radius: 50px; 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    z-index:20; 
} 

.image { 
    text-align: center; 
    height: 100%; 
    background: no-repeat center center; 
} 

.container { 
    width: 275px; 
    height: 350px; 
    background-color: white; 
    margin: 0 auto; 
    position: absolute; 

    left: 0; 
    right: 0; 
    margin: 0 auto; 
    top: 38px 
} 

.text { 
    text-align: center; 
     z-index: 25; 
    position: absolute; 
    left: 35%; 
} 

https://codepen.io/anon/pen/OgEROK