Skip to content
RefineUI

Z-index

Stacking layers for content, overlays, popups, toasts, and debug.

TokenTypical use
zIndexBackgroundBehind content
zIndexContentDefault content
zIndexOverlayModal / drawer scrim and panels
zIndexPopup / zIndexFloatingMenus, popovers
zIndexMessagesToasts
zIndexPriorityCritical chrome
zIndexDebugDev overlays

Modal and drawer → overlay. Menu and popover → popup. Toast → messages. Do not invent z-index: 9999.

zIndexBackground0
zIndexContent1
zIndexOverlay100
zIndexPopup1000
zIndexMessages10000
zIndexFloating1000
zIndexPriority100000
zIndexDebug999999
.menu {
z-index: var(--refineui-z-popup);
}