Skip to main content

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.

Want automated scanning?

SCOUTb2 runs 25+ accessibility, performance, SEO, and security checks on any page automatically.

Install SCOUTb2 Free