CSS Stacking Contexts

Avatar of Chris Coyier
Chris Coyier on

Learn Development at Frontend Masters

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.

  1. Elements with a negative stack level, typically elements with z-index: -1
  2. Elements with a position value of static.
  3. Elements with a stack level of 0, typically positioned elements with a z-index value of auto.
  4. Elements with positive stack levels, e.g. a positioned element with a z-index value of 1 or higher.

Direct Link →