SCSS: Z-index

La escala de z-index evita números mágicos en capascomúnes como headers, overlays, modales y toasts.

Token	Valor	Uso esperado
$z-base	0	Capa normal
$z-raised	1	Elementos elevados locales
$z-sticky	10	Sticky dentro de layout
$z-header	100	Headers o navegación fija
$z-overlay	1000	Backdrops y overlays
$z-modal	1100	Modales y drawers
$z-toast	1200	Mensajes temporales

Resultado visual

$z-base · 0contenido base

$z-raised · 1contenido elevado

$z-header · 100header/sticky

$z-overlay · 1000overlay

$z-modal · 1100modal/drawer

$z-toast · 1200toast

Import

@use '@micazoyolli/foundation/scss' as foundation;

Uso correcto

.modal {
  z-index: foundation.$z-modal;
}

Cuándo usarlo

• Cuando la capa escomún y semántica.
• Cuando quieres evitar 999999.
• Cuando el componente no vive dentro de un stacking context especial.

Cuándo no usarlo

• Para tapar bugs sin revisar position, transform u overflow.
• Para componentes con una escala local propia.

Archivo/export relacionado: src/scss/tokens/_z-index.scss