CSS Stacking Contexts

Avatar of Chris Coyier
Chris Coyier on

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

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 →