Utilitário

Z-Index

Camadas nomeadas para ordenar elementos sobrepostos sem brigar com valores arbitrários.

Classes

Classe CSS	Descrição
`.z-index-1`	`z-index: 1;`
`.z-index-2`	`z-index: 2;`
`.z-index-3`	`z-index: 3;`
`.z-index-header`	`z-index: var(--z-index-header);`
`.z-index-popover`	`z-index: var(--z-index-popover);`
`.z-index-fixed-element`	`z-index: var(--z-index-fixed-element);`
`.z-index-overlay`	`z-index: var(--z-index-overlay);`

CSS variables

Variáveis padrão do design system:

:root {
  --z-index-header: 3; /* ex.: header principal */
  --z-index-popover: 5; /* ex.: tooltips e dropdowns */
  --z-index-fixed-element: 10; /* ex.: botão "voltar ao topo" */
  --z-index-overlay: 15; /* ex.: modais e diálogos */
}

Para aplicar um valor da escala em CSS de componente:

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