Stacking Context: De ce nu Funcționează z-index: 99999?

1. Ce este un Stacking Context (Context de Stivuire)?

Browserul desenează elementele pe ecran de-a lungul axei imaginare Z (perpendiculară pe ecran, de la monitor către utilizator). Un Stacking Context este un spațiu tridimensional izolat în care elementele copil sunt ordonate conform anumitor reguli.

Imaginează-ți contextele de stivuire ca pe niște dosare separate: poți pune o foaie pe prima poziție în Dosarul 1, dar dacă Dosarul 2 este așezat fizic deasupra Dosarului 1 pe birou, toate foile din Dosarul 2 vor fi deasupra foilor din Dosarul 1.

2. Proprietățile care generează pe ascuns un Stacking Context

Mulți dezvoltatori cred că doar position și z-index controlează stivuirea. În realitate, specificațiile moderne W3C prevăd că următoarele proprietăți creează automat un nou Stacking Context:

• Elementul rădăcină al documentului (<html>);
• Un element cu position: relative, absolute sau fixed care are un z-index diferit de auto;
• Un element copil flex sau grid care are z-index setat (fără a necesita position!);
• Un element cu opacity mai mic decât 1;
• Un element care are transform, filter, perspective sau clip-path aplicat;
• Un element care folosește contain: paint sau contain: layout;
• Un element cu will-change setat pe o proprietate grafică;
• Un element care declară explicit isolation: isolate.

3. Soluția Modernă W3C: isolation: isolate

Înainte de CSS3, dacă voiai să creezi un context de stivuire controlat pentru a preveni scăparea efectelor grafice, trebuia să adaugi hack-ul position: relative; z-index: 0;.

Astăzi avem proprietatea declarativă curată isolation: isolate:

.card-component {
  isolation: isolate; /* Creeaza un context curat, fara trucuri de pozitionare */
}

/* Pseudo-elementul de fundal decorativ ramane in spatele textului,
   fara sa dispara sub fundalul general al paginii! */
.card-component::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blue-line);
}

4. Arhitectura Recomandată a Straturilor (Scară Z-Index pentru Producție)

Pentru a opri „războiul numerelor infinite” în echipele de dezvoltare, definește o scală strictă de variabile CSS în :root:

:root {
  /* Scara Z-Index a sistemului de design */
  --z-adancit: -1;
  --z-normal: 1;
  --z-card-hover: 10;
  --z-header-sticky: 100;
  --z-meniu-dropdown: 200;
  --z-overlay-backdrop: 500;
  --z-fereastra-modal: 1000;
  --z-toast-notificare: 2000;
  --z-tooltip-plutitor: 3000;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header-sticky);
}

.modal-dialog {
  position: fixed;
  z-index: var(--z-fereastra-modal);
}