dexblog.ro
CSS Toate proprietățile CSS

z-index în CSS

Display și Poziționare CSS2+

Stabilește ordinea de suprapunere a elementelor pe axa adâncimii Z (care element stă deasupra cui).

Sintaxă CSS 
z-index: 10;
z-index: 50;  /* deasupra lui 10 */
z-index: 100; /* modale sau meniuri dropdown */
z-index: -1;  /* plasat în spatele conținutului */

Ce face z-index

Când două sau mai multe elemente poziționate se suprapun pe ecran, z-index decide care dintre ele este desenat deasupra celorlalte.

Elementul cu cel mai mare z-index stă în prim-plan. Valoarea poate fi un număr pozitiv, zero sau negativ.

Regulă esențială: z-index funcționează doar pe elemente poziționate (cele care au position: relative, absolute, fixed sau sticky) sau pe copiii direcți ai unui container flex ori grid.

Valori uzuale

Valoare Descriere
număr întreg Valoarea pe axa Z (ex. 1, 10, 1000).
auto Implicit: elementul moștenește ordinea din flux.

Exemple

Exemplul 1: Meniu fixat care rămâne întotdeauna deasupra conținutului la scroll

z-index: 100 împiedică articolele sau imaginile să treacă peste meniu.

header.meniu-fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: white;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Efect vizual în browser

Meniul alb rămâne fixat în partea de sus a ecranului, plutind garantat peste orice alt text sau imagine la derulare.

Greșeli frecvente

  • Punerea z-index: 99999 pe un element cu position: static; fără position setat, z-index este complet ignorat.
  • „Războiul z-index”: creșterea haotică a numerelor la 99999999 în loc de o scară organizată (ex. nivel 10 = dropdown, 50 = meniu fix, 100 = modal).
  • Ignorarea contextelor de stivuire (stacking context): un copil cu z-index: 9999 aflat într-un părinte cu z-index: 1 nu va putea trece niciodată deasupra unui vecin cu z-index: 2.

Comenzi înrudite