'Absolute positioned elements stack in opposite order (not as expected) [duplicate]

#child_1, #child_2 {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
}

#child_1 {
  background-color: green;
}

#child_2 {
  background-color: blue;
}
<div id="child_1">Green Child 1</div>
<div id="child_2">Blue Child 2</div>

Child 1 is positioned BEFORE Child 2 in the HTML. I therefore expect Child 1 to be displayed above Child 2, not the opposite way. Can someone explain what's going on?

Any help would be greatly appreciated!

css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions