z-index on sibling absolute elements

Question

I'm trying to grasp why the blue divs in this example are not always on top? i.e. how come red div #2 is on top of blue child 1.

body {
  padding: 30px;
}
.red1 {
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 200px;
  background: red;
}
.red2 {
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 200px;
  top: 250px;
  background: red;
}
.blue {
  z-index: 9;
  padding: 10px;
  text-align: center;
  color: white;
  text-transform: uppercase;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 150px;
  height: 130px;
  background: blue;
}

<div class="red1">
  <div class="blue">
    blue child 1
  </div>
</div>
<div class="red2">
  <div class="blue">
    blue child 2
  </div>
</div>

FIDDLE

Answer 1

Because .red1 and .red2 form different stacking contexts.

The elements within one stacking context do not participate along with the elements within another stacking context.

If you give .red2 a z-index: -1, you will get the behavior you expect (demo).

That's because .red1 and .red2 are both absolutely positioned with no positioned ancestor. This means the root element is their immediate ancestor, and the root element forms a stacking context.

More details here:

• Basics of the CSS z-index property
• Understanding z-index: How does this element appear in front of its parent's sibling?

Answer 2

body {
  padding: 30px;
}
.red1 {
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 200px;
  background: red;
}
.red2 {
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 200px;
  top: 250px;
  background: red;
}
.blue {
  z-index: 9;
  padding: 10px;
  text-align: center;
  color: white;
  text-transform: uppercase;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 150px;
  height: 130px;
  background: blue;
}

<div class="red2">
  <div class="blue">
    blue child 2
  </div>
</div>
<div class="red1">
  <div class="blue">
    blue child 1
  </div>
</div>