Z-Index Visualizer
Paste HTML/CSS to see stacking contexts in 3D. Understand why "z-index not working" and get fix suggestions.
Try Kinsta free for 30 days
Simply better WordPress hosting. Unlimited migrations.
Input
HTML
CSS
Layer Visualization
No layers to visualize
Paste HTML/CSS above or select an example to see stacking contexts in action.
What Creates a Stacking Context?
Any of these CSS properties will create a new stacking context, isolating z-index within:
position: relative/absolute/fixed
+ z-index other than auto
transform
Any value other than none
opacity
Any value less than 1
filter
Any value other than none
isolation: isolate
Explicitly creates context
will-change
transform, opacity, etc.
mix-blend-mode
Any value other than normal
clip-path / mask
Any value other than none