Z-Index & Stacking Contexts

Understand how z-index controls layer stacking and how isolation creates new stacking contexts. Drag the sliders to see elements shift in front of or behind each other.

Parent Container

z-index

isolation

Default behavior. Children participate in the nearest ancestor stacking context.

Children

Box A · z-index

Box B · z-index

Generated CSS

/* Parent */
z-index: 0;
isolation: auto;

/* Box A */
z-index: 10;

/* Box B */
z-index: 5;

Ref Boxz: 1

Parent · z:0

Box Az: 10

Box Bz: 5

class="z-[0] auto"