Free CSS Z-Index Reference Guide
Interactive reference for CSS z-index values. Shows common layering conventions and helps you find the right z-index for your element.
- 100% client-side - your data never leaves your browser.
1-9Base layers
Slightly elevated cards, sticky table headers
10-49Low overlays
Sticky elements, floating labels, back-to-top buttons
50-99Sticky headers
Fixed navigation bars, sticky sidebars
100-199Dropdowns
Navigation dropdowns, autocomplete suggestions
200-499Popovers
Popovers, date pickers, color pickers
500-999Tooltips
Tooltip overlays, floating help text
1000-1999Modals
Dialog modals, lightboxes, overlays with backdrop
2000-2999Drawers
Side drawers, slide-in panels, shopping carts
3000-3999Notifications
Toast notifications, snackbars, alerts
4000-9999Critical UI
Cookie banners, GDPR notices, critical alerts
99999Maximum
Emergency overlays, development tools
Stacking context note: z-index only works within the same stacking context. A transform, opacity <1, filter, or will-change on a parent element creates a new stacking context, which can cause z-index to appear broken.