Overflowing siblings' children the proper way

Question

I have a circular div that represents white circle and the logo. It seems like I wanted it to be.

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

Then, I created another rectangle div as a sibling to whiteBox, for the other contents.

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

The positioning of both parents looks alright however I couldn't figure out a way to move the Heading above the whiteBox. I played with the combinations of z-index but I read it's not possible to adjust children's z-index and parent at the same time.

What am I doing wrong? What is the proper way of achieving it?

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

Answer 1

1- Remove the z-index from your parent div.
2- Add z-index to your white-box div, i choose the value 20.
3- Absolute positioning your .text class and make sure the z-index of it is bigger than 20;

The 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