Z-index
4 min read
z-index controls stacking order for positioned elements. Higher values appear in front. Stacking contexts are created by opacity < 1, transform, and filter. Elements in different stacking contexts cannot be directly compared.
Stacking with z-index
/* z-index only works on positioned elements */
.modal-overlay {
position: fixed;
z-index: 100;
}
.tooltip {
position: absolute;
z-index: 10;
}
/* Stacking context — z-index is relative within it */
.parent {
position: relative;
z-index: 1; /* creates new stacking context */
}
/* Common z-index scale */
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-modal: 40;
--z-toast: 50;