Tiffany B. Brown breaks down what stacking contexts are in a very quick and understandable way. First, what makes a new context, then:
Children of a stacking context are painted from bottom to top in the following order.
- Elements with a negative stack level, typically elements with
z-index: -1- Elements with a
positionvalue ofstatic.- Elements with a stack level of 0, typically positioned elements with a
z-indexvalue ofauto.- Elements with positive stack levels, e.g. a positioned element with a
z-indexvalue of1or higher.