Z-Index

Z-index tokens define a controlled layering system for Aggarly Platform. They prevent random z-index escalation and ensure predictable stacking across components, overlays, and navigation elements.

Z-Index Scale

var(--ds-z-base)

Base

$z-base → --ds-z-base

var(--ds-z-base)

var(--ds-z-dropdown)

Dropdown

$z-dropdown → --ds-z-dropdown

var(--ds-z-dropdown)

var(--ds-z-sidebar)

Sidebar

$z-sidebar → --ds-z-sidebar

var(--ds-z-sidebar)

var(--ds-z-navbar)

Navbar

$z-navbar → --ds-z-navbar

var(--ds-z-navbar)

var(--ds-z-modal)

Modal

$z-modal → --ds-z-modal

var(--ds-z-modal)

var(--ds-z-tooltip)

Tooltip

$z-tooltip → --ds-z-tooltip

var(--ds-z-tooltip)

Usage Guidelines

Always use z-index tokens instead of hardcoded numeric values.
$z-base is reserved for default content and layout elements.
$z-dropdown is used for menus, select lists, and popovers.
$z-sidebar and $z-navbar are used for persistent navigation elements.
$z-modal is reserved exclusively for modal dialogs and blocking overlays.
$z-tooltip must remain the highest layer to ensure visibility above all other UI elements.
Never introduce new z-index values without first evaluating whether an existing token satisfies the requirement.