Z-Index

A structured z-index scale with wide gaps between layers to avoid collisions.

Scale

--z--1 -1Behind everything

--z-0 0Default stacking

--z-1 1000Dropdowns, tooltips

--z-2 2000Sticky elements

--z-3 3000Fixed headers

--z-4 4000Overlays

--z-5 5000Modals

--z-6 6000Popovers

--z-7 7000Toasts

--z-8 8000Alerts

--z-9 9000Top-level UI

--z-important 2147483647Maximum (nuclear option)

Usage

.dropdown {
  z-index: var(--z-1);
}

.modal-backdrop {
  z-index: var(--z-4);
}

.modal {
  z-index: var(--z-5);
}

.toast {
  z-index: var(--z-7);
}