z-index și Stacking Context Ghid Rapid

In this tutorial, you'll learn about z. We cover key concepts, practical examples, and best practices.

Vei învăța cum să gestionezi z-index și stacking context în CSS pentru a controla ordinea de suprapunere a elementelor, evitând problemele frecvente de afișare.

Problema

Setezi z-index: 9999 pe un element dar acesta rămâne sub alte elemente. Proprietatea z-index funcționează doar în cadrul aceluiași stacking context, iar multe proprietăți CSS creează noi contexte de suprapunere fără ca developerul să își dea seama.

Rezolvare rapidă

Pasul 1: Asigură-te că poziția este setată

/* Greșit — z-index fără poziționare */
.overlay {
    z-index: 100;
}

/* Corect */
.overlay {
    position: relative;
    z-index: 100;
}

Rezultat: Elementul respectă acum z-index.

Pasul 2: Identifică stacking context-urile părinte

Un părinte poziționat cu z-index creează un nou stacking context:

.parent {
    position: relative;
    z-index: 1; /* creează stacking context */
}

/* Greșit — oricât de mare, z-index-ul copilului
   este limitat la contextul părintelui */
.child {
    position: absolute;
    z-index: 9999;
}

/* Corect — crește z-index-ul părintelui sau modifică structura */
.parent {
    position: relative;
    z-index: 10;
}

Rezultat: Copilul apare deasupra elementelor care concurează cu părintele.

Pasul 3: Elimină proprietățile care creează stacking context accidental

/* Greșit — opacity sub 1 creează stacking context */
.modal-container {
    opacity: 0.99;
}
.modal {
    position: absolute;
    z-index: 1000; /* limitat de container */
}

/* Corect — mută opacity pe elementul care trebuie */
.modal {
    position: absolute;
    z-index: 1000;
    opacity: 0.99;
}

Rezultat: Modalul apare deasupra tuturor conținutului.

Pasul 4: Folosește isolation: isolate intenționat

/* Uneori ai nevoie de un nou stacking context */
.dropdown-menu {
    position: absolute;
    z-index: 1000;
}

/* Greșit — stacking context accidental */
.widget {
    transform: translateZ(0); /* nu se vede dar creează context */
}

/* Corect — explicit și intenționat */
.widget {
    isolation: isolate; /* stacking context nou, fără efecte secundare */
}

Rezultat: Stacking context-urile sunt create explicit, nu accidental.

Pasul 5: Inspectează cu DevTools

Chrome DevTools arată stacking context-urile în tab-ul Elements. Caută elemente etichetate "Stacking context" pentru a identifica cauza. Tab-ul Computed arată valoarea efectivă a lui z-index.

Prevenire

• Asociază întotdeauna z-index cu o valoare de poziționare
• Păstrează adâncimea de cuibărit la minim pentru a evita stacking context-uri accidentale
• Folosește isolation: isolate intenționat, nu accidental
• Menține valori z-index într-un interval logic (10-100)

Greșeli comune

1. Folosirea z-index fără position — z-index nu funcționează pe elemente static poziționate.
2. Stacking context-uri create de opacity, transform, filter — Proprietăți precum opacity: 0.99 sau transform: translateZ(0) creează noi contexte.
3. Valori exagerate de z-index — z-index: 99999 nu ajută dacă elementul e într-un stacking context intern; creează doar haos.
4. Ignorarea ordinii elementelor în HTML — La același z-index, ordinea în DOM decide care apare deasupra.
5. Confundarea z-index cu float sau poziționare — float și position afectează și ele vizibilitatea, independent de z-index.

Exercițiu

Creează o pagină cu 3 carduri suprapuse parțial, fiecare având un tooltip care apare deasupra tuturor celorlalte elemente. Asigură-te că tooltip-urile nu sunt tăiate de stacking context-ul cardurilor.

Întrebări frecvente

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu CSS și HTML pentru productivitate și securitate sporită.