Understanding z-index: How does this element appea

Question

Why is the red div in front of the green div when I remove z-index from .wrapperRed?

It feels like z-index is inherited up the chain.

If I change the z-index of the green div to 6, it stays in front of the red one even after removing the line described in the first sentence.

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  z-index: 1; /* Why is the red div in front of the green one, if this z-index is deleted? */
}

.red {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: red;
  z-index: 5;
}

.green {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 1;
}

<div class="wrapperRed">
  <div class="red"></div>
</div>
<div class="green"></div>

Answer 1

When you remove z-index from .wrapperRed, the element defaults to z-index: auto.

In this case, both .red and .green participate in the same stacking context because positioned elements do not create a stacking context when z-index is auto (reference).

Learn more about z-index and stacking contexts here: Basics of the CSS z-index property

Answer 2

Why is the .red div in front of the green div when I remove z-index from .wrapperRed?

Because .red no longer has a parental z-index to constrain it.

ie.

Before: .red has a z-index of 5 within a parental z-index of 1.

After: .red has a global z-index of 5.

N.B. In both Before and After cases, .wrapperRed is always behind .green. But, when it is unconstrained, .red (which is 100% the width and height of .wrapperRed) appears in front of .green.

---

You can see this more easily if you give the parent and child divs different background colours and make the child div smaller than the parent.

Compare:

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  background-color: red;
  z-index: 1;
}

.yellow {
  position: absolute;
  height: 75%;
  width: 75%;
  background-color: yellow;
  
  z-index: 5;
}

.green {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
  
  z-index: 1;
}

<div class="wrapperRed">
  <div class="yellow">
  </div>
</div>

<div class="green"></div>

with:

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  background-color: red;
}

.yellow {
  position: absolute;
  height: 75%;
  width: 75%;
  background-color: yellow;
  
  z-index: 5;
}

.green {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
  
  z-index: 1;
}

<div class="wrapperRed">
  <div class="yellow">
  </div>
</div>

<div class="green"></div>