Z-Index

Z-Index for components is based on the component’s category (table 1) times a multiplier determined by the section of the site the component is placed (table 2).

This approach allows the same component in the header to have a different z-index than one placed in the body or a modal. For example, the search combobox in the header can have a higher z-index than the main nav, but the search combobox in the body will not appear above the main nav dropdowns.

Usage

The default multiplier is set as a root custom property to 1.

Set the multiplier for each section of the site:

<header style="--z:100"></header>
<main>
  <div class="modal" style="--z:1000"></div>
</main>

Write the z-index property using the multiplier:

.combobox__menu {
  z-index: calc(var(--z) * 30);
}

Table 1 - Z-Index Component Categorization

Table 2 - var(--z) Multipliers