Z-Index Manager

Configuration

Layer Hierarchy

Layer Details

Z-Index Hierarchy
==================================================

SPECIAL
--------------------------------------------------
 9999 │ ███████████████████████████████████████████████████████████████████████████████████████████████████ max - Maximum z-index

NOTIFICATION
--------------------------------------------------
 1080 │ ██████████ notification - Toast notifications

OVERLAY
--------------------------------------------------
 1070 │ ██████████ tooltip - Tooltips
 1060 │ ██████████ popover - Popovers
 1000 │ ██████████ dropdown - Dropdown menus

MODAL
--------------------------------------------------
 1050 │ ██████████ modal - Modal dialogs
 1040 │ ██████████ backdrop - Modal backdrop

FIXED
--------------------------------------------------
 1030 │ ██████████ fixed - Fixed elements
 1020 │ ██████████ sticky - Sticky elements

CONTENT
--------------------------------------------------
    0 │ █ base - Default page content

:root {
  --z-base: 0; /* Default page content */
  --z-dropdown: 1000; /* Dropdown menus */
  --z-sticky: 1020; /* Sticky elements */
  --z-fixed: 1030; /* Fixed elements */
  --z-backdrop: 1040; /* Modal backdrop */
  --z-modal: 1050; /* Modal dialogs */
  --z-popover: 1060; /* Popovers */
  --z-tooltip: 1070; /* Tooltips */
  --z-notification: 1080; /* Toast notifications */
  --z-max: 9999; /* Maximum z-index */
}

/* Z-Index Utility Classes */
.z-base {
  z-index: var(--z-base);
}

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

.z-sticky {
  z-index: var(--z-sticky);
}

.z-fixed {
  z-index: var(--z-fixed);
}

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

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

.z-popover {
  z-index: var(--z-popover);
}

.z-tooltip {
  z-index: var(--z-tooltip);
}

.z-notification {
  z-index: var(--z-notification);
}

.z-max {
  z-index: var(--z-max);
}