CSS Z Index Playground
Preview overlapping boxes and z-index stacking order.
Understand stacking order
z-index only works within a stacking context, which is why elements sometimes refuse to sit on top no matter how high you set the number. This playground lets you overlap boxes and change their z-index so you can see the stacking order resolve in real time.
Watching the layers reorder builds the intuition that finally makes z-index predictable. Experiment with overlapping elements and their values, then take that understanding back to your real layout to fix a stubborn stacking bug.
Stacking, previewed
z-index only compares elements within the same stacking context, which is why a high value can still sit behind. The playground makes contexts visible in your browser.
Frequently asked questions
Why doesn't z-index work on my element?
z-index only applies to positioned elements (relative, absolute, fixed, or sticky) and to flex or grid children. On a plain static element it is ignored.
Why can't a z-index of 9999 get above another element?
Both elements may sit in different stacking contexts. A child can never rise above its parent's context, and properties like transform, opacity below 1, or filter create a new one.
What happens when two boxes have the same z-index?
The one that comes later in the HTML is drawn on top. In the playground, boxes A, B, and C overlap in that order, so C wins a tie.
Related tools
Practical utilities for front-end design and implementation work.