Z-Index

The Six Webcomponents library uses a set of z-index tokens to manage stacking context throughout the interface.

CSS Variable	Value	Usage
--six-z-index-header	500	Used for header elements
--six-z-index-search-field	500	Used for search field components
--six-z-index-drawer	600	Used for drawer/sidebar components
--six-z-index-dropdown	700	Used for dropdown menus
--six-z-index-toast	800	Used for toast notifications
--six-z-index-tooltip	900	Used for tooltips
--six-z-index-dialog	1000	Used for modal dialogs

Interactive Example

Hover over the box below to see how z-index affects stacking order:

Header Element

z-index: 500

Hover Me!

z-index: 400 → 600

In this example, the red box starts with a lower z-index (400) than the blue box (500). When you hover over the container, the red box's z-index increases to 600, causing it to appear above the blue box.

Example Usage

.header {
  z-index: var(--six-z-index-header); /* 500 */
}

.tooltip {
  z-index: var(--six-z-index-tooltip); /* 900 */
}

/* Dropdown menu that appears above the header */
.dropdown-menu {
  position: absolute;
  z-index: var(--six-z-index-dropdown); /* 700 */
  /* This ensures the dropdown appears above the header (500) */
}