Überfließende Geschwister Kinder der richtige Weg

Question

Ich habe eine kreisförmige div, die weißen Kreis und das Logo darstellt. Es scheint, als ob ich es wollte.

<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; 
} 

Dann habe ich ein weiteres Rechteck div als Geschwister zu whiteBox, für die anderen Inhalte.

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

Die Positionierung beiden Eltern sieht aber in Ordnung mich nicht einen Weg finden, könnte die Überschrift über den whiteBox zu bewegen. Ich habe mit den Kombinationen des Z-Index gespielt, aber ich habe gelesen, dass es nicht möglich ist, den Z-Index und das Elternteil von Kindern gleichzeitig anzupassen.

Was mache ich falsch? Was ist der richtige Weg, um es zu erreichen?

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

Answer 1

1- die z-index von einem Elternteil div entfernen.
2- Fügen Sie z-index zu Ihrem White-Box Div, ich wähle den Wert 20.
3- Absolute Positionierung Ihrer .text-Klasse und stellen Sie sicher, dass der Z-Index von ihm größer als 20 ist;

Die CSS

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