Hack Frontend Community

CSS Stacking Order

Stacking Order is the order in which elements overlay each other along the Z-axis (depth). This determines which element will be "on top" if they overlap.

How Does Stacking Order Work?

Basic Rules

  1. By default, elements overlay in the order they appear in the DOM.
  2. Elements with position (relative, absolute, fixed, sticky) and z-index can overlay each other.
  3. Creating stacking context affects display priority.

Stacking Order Algorithm

  1. Root element context (html)
  2. Block background and borders with z-index: auto
  3. Block elements without positioning (position: static)
  4. Positioned elements (relative, absolute, fixed, sticky) with z-index: auto
  5. Positioned elements with z-index > 0
  6. Created stacking contexts (inside transform, opacity < 1, filter, will-change, etc.)

What is Stacking Context?

Stacking Context is an isolated layering area where layer order works independently of parents.

How Stacking Context is Created

  • z-index (with positioned elements)
  • opacity < 1
  • transform, filter, perspective
  • will-change
  • position: fixed or position: sticky

Tip:

If z-index doesn't work, check if the element creates its own stacking context.