IconVault logoIconVault
Sign in

CSS Stacking Context - Interactive CSS Lab | IconVault

Visualize CSS stacking contexts and z-index paint order live. Tweak position, opacity, transform and isolation, see what paints on top.

All tools

CSS Stacking Context

Interactive z-index and paint-order visualizer

5 of 5 free uses left
Fully live: real CSSThe stage uses your exact values, so the render and the paint-order readout always agree.

Live stage (boxes overlap on purpose)

A
B
C

Paint order (back to front)

A→B→C

Spec order: negative z-index stacking contexts, then non-positioned blocks, then positioned z-index 0/auto (and z:auto stacking contexts in DOM order), then positive z-index. A parent that forms a stacking context traps its children inside it: no child z-index can ever escape above a sibling stacking context.

Current setup as CSS
/* Paint order, back to front: A → B → C */
.box-a {
  position: absolute;
  z-index: 1;
}

.box-b {
  position: absolute;
  z-index: 2;
}

.box-c {
  position: absolute;
  z-index: 3;
}

5 of 5 free uses left. All controls and the live stage are unlimited.

ABox A
z-index1
opacity1.0
Stacking context:
  • position: absolute with z-index 1 (a positioned z-index always creates one)
BBox B
z-index2
opacity1.0
Stacking context:
  • position: absolute with z-index 2 (a positioned z-index always creates one)
CBox C
z-index3
opacity1.0
Stacking context:
  • position: absolute with z-index 3 (a positioned z-index always creates one)

About this tool

IconVault's CSS Stacking Context visualizer turns the most confusing part of CSS painting into something you can poke. Three overlapping boxes each get live controls for position, z-index, opacity, transform, isolation and filter. The stage renders your exact values while a back-to-front paint-order readout, computed per the spec, explains which box wins and why.

Gotcha alerts fire as you experiment: z-index ignored on static elements, opacity below 1 creating a stacking context, transforms and filters trapping children. It is free, runs fully in your browser, and the current setup exports as copyable CSS with the paint order baked into a comment.

Frequently asked questions

Popular searches

css stacking contextz-index stacking contextcss paint orderz-index not workingz index ignoredstacking context explainedcss stacking orderwhat creates a stacking contextopacity stacking contexttransform stacking contextfilter stacking contextisolation isolate cssz-index position staticz-index absolute not workingcss z-index tutoriallearn css stacking contextinteractive z-index democss paint order visualizerz-index visualizerstacking context visualizercss stacking context listdoes transform create stacking contextdoes opacity create stacking contextdoes filter create stacking contextwill-change stacking contextmix-blend-mode stacking contextcss z-index 9999 not workingchild z-index parent stacking contextz-index trappedcss paint order specstacking context mdncss z-index best practicesdebug z-index chrome devtoolscss stacking context 2026css positioned elements painting ordernegative z-index cssz-index auto vs 0isolation css propertycss contain stacking contextclip-path stacking contextperspective stacking contextcss stacking context examplesz-index modal overlaydropdown z-index problemcss dropdown behind contenttooltip z-index issuecss stacking context playgroundinteractive css stacking democss rendering orderbrowser paint order css

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →