z-index and child items

Issue

I try to get familiar with the different positioning attributes and the z-index. While playing around I noticed that child elements are covering the parent element even if the parent has a z-index of 1:

div {
  width: 200px;
  height: 200px;
}

.red {
  background-color: red;
  position: absolute;
}

.blue {
  background-color: blue;
  position: absolute;
  left: 1877px;
}

.yellow {
  background-color: yellow;
}

.white {
  background-color: white;
  position: absolute;
  left: 650px;
  z-index: 1;
}

<div class="white">
  <div class="red"></div>
</div>
<div class="blue"></div>
<div class="yellow"></div>

So the div element with the class "white" is covered by the "red" div despite a z-index of 1... Could anyone please explain me the behavior?

Solution

The white div has z-index: 1;, sure, but this just means this div and it's content will be on top. As your red div is also part of the content of the white div, nothing has changed.

EXAMPLE
If you give the red div the same position as the white one, then put it outside of the white div, you will get the result you expected.

div {
  width: 200px;
  height: 200px;
}

.red {
  background-color: red;
  left: 650px;
  position: absolute;
}

.blue {
  background-color: blue;
  position: absolute;
  left: 1877px;
}

.yellow {
  background-color: yellow;
}

.white {
  background-color: white;
  position: absolute;
  left: 650px;
  z-index: 1;
}

<div class="white"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>

If you remove your white div's z-index, you will see the red div again:

div {
  width: 200px;
  height: 200px;
}

.red {
  background-color: red;
  left: 650px;
  position: absolute;
}

.blue {
  background-color: blue;
  position: absolute;
  left: 1877px;
}

.yellow {
  background-color: yellow;
}

.white {
  background-color: white;
  position: absolute;
  left: 650px;
}

<div class="white"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>

CONCLUSION
The z-index applies to the element and it's child elements.

Answered By - Thomas