de Veronika Ivhed

Z-Index explicat: Cum se stivuiesc elemente folosind CSS

Z Index explicat Cum se stivuiesc elemente folosind CSS
Fotografie de Tot Bong pe Unsplash

M-am luptat întotdeauna cu proprietatea CSS indexul z. Sună atât de ușor la început. Elementele cu o valoare a indexului z mai mare sunt afișate în fața celor cu o valoare a indexului z mai mică. Totuși, de multe ori am ajuns în situații în care se pare că valoarea indexului z nu a avut niciun efect.

Am decis că am avut suficiente încercări și erori cu indexul z și că vreau să înțeleg mai bine. Sper că acest articol vă poate ajuta, așa că nu vă veți întreba niciodată de ce indexul z nu face ceea ce vă așteptați să facă.

Ordinea de stivuire implicită

Să menționăm mai întâi ordinea implicită în care browserul stochează elemente, atunci când nu se aplică indexul z:

  1. Element rădăcină (elementul)
  2. Elementele nepoziționate în ordinea în care sunt definite
  3. Elementele poziționate în ordinea în care sunt definite

A ne-poziționat element este un element cu valoarea de poziție implicită statică. A poziționat element este un element cu orice altă valoare de poziție. Exemple de alte valori sunt: ​​absolute, relative, lipicioase sau fixe.

HTML:

<div class=”pink”>
  <div class=”orange”></div>
</div>
<div class=”blue”></div>
<div class=”green”></div>

CSS:

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */

.blue, .pink, .orange {
  position: absolute;
}
Z Index explicat Cum se stivuiesc elemente folosind CSS
https://codepen.io/ivhed/pen/QrdEBB

Am definit ultima casetă verde din document. Totuși, apare în spatele celorlalte pentru că este ne-poziționat.

Stivuirea cu indexul z

Dacă dorim acum să schimbăm ordinea de stivuire a acestor elemente, putem folosi proprietatea z-index. Un element cu un indice z mai mare va fi afișat în fața unui element cu un indice z mai mic. Un lucru de remarcat este acel index funcționează numai cu elemente poziționate.

.blue, .pink, .orange {
  position: absolute;
}

.blue {
  z-index: 2;
}

.orange {
  z-index: 3;
}

.green {
  z-index: 100; // has no effect since the green box is non-         positioned
}
1611766507 38 Z Index explicat Cum se stivuiesc elemente folosind CSS
https://codepen.io/ivhed/pen/xjqmpV

Caseta portocalie cu un indice z mai mare este afișată în fața casetei albastre.

Stivuirea contextului

Să presupunem că adăugăm o altă casetă poziționată la aspect pe care vrem să o poziționăm în spatele casetei roz. Ne actualizăm codul la următoarele:

HTML:

<div class=”pink”>
  <div class=”orange”></div>
</div>
<div class=”blue”></div>
<div class=”purple”></div>
<div class=”green”></div>

CSS:

.blue, .pink, .orange, .purple {
  position: absolute;
}

.purple {
  z-index: 0;
}

.pink {
  z-index: 1;
}

.blue {
  z-index: 2;
}

.orange {
  z-index: 3;
}

.green {
  z-index: 100;
}
1611766507 493 Z Index explicat Cum se stivuiesc elemente folosind CSS
https://codepen.io/ivhed/pen/YLZdjx

Caseta noastră roz este afișată în fața casetei violete așa cum era de așteptat, dar ce s-a întâmplat cu caseta portocalie? De ce se află dintr-o dată în spatele celui albastru, chiar dacă are un indice Z mai mare? Acest lucru se datorează faptului că adăugarea unei valori a indexului z unui element formează ceea ce se numește a context de stivuire.

Caseta roz are o valoare a indexului z, alta decât auto, care formează un nou context de stivuire. Faptul că formează un context de stivuire afectează modul în care sunt afișate elementele sale copil.

Este posibil să modificați ordinea de stivuire a elementelor copil cutie roz. Cu toate acestea, lor indexul z are doar o semnificație în contextul respectiv de stivuire. Aceasta înseamnă că nu vom putea muta caseta portocalie în fața casetei albastre, deoarece acestea nu se mai află în același context de stivuire.

Dacă dorim ca caseta albastră și caseta portocalie să facă parte din același context de stivuire, putem defini caseta albastră ca un element copil al casetei roz. Acest lucru va face ca caseta albastră să apară în spatele celei portocalii.

<div class=”pink”>
  <div class=”orange”></div>
  <div class=”blue”></div>
</div>
<div class=”purple”></div>
<div class=”green”></div>
1611766507 332 Z Index explicat Cum se stivuiesc elemente folosind CSS
https://codepen.io/ivhed/pen/erGoJE

Contextele de stivuire nu se formează numai atunci când se aplică indexul z unui element. Sunt alte câteva proprietăți care fac ca elementele să formeze contexte de stivuire. Câteva exemple sunt: ​​filtru, opacitate și transformare.

Să ne întoarcem la exemplul nostru anterior. Caseta albastră este din nou un frate al casetei roz. De data aceasta, în loc să adăugăm indexul z în caseta roz, aplicăm un filtru la ea.

HTML:

<div class=”pink”>
  <div class=”orange”></div>
</div>
<div class=”blue”></div>
<div class=”green”></div>

CSS:

.blue, .pink, .orange {
  position: absolute;
}

.pink {
  filter: hue-rotate(20deg);
}

.blue {
  z-index: 2;
}

.orange {
  z-index: 3;
}

.green {
  z-index: 100;
}
1611766507 127 Z Index explicat Cum se stivuiesc elemente folosind CSS
https://codepen.io/ivhed/pen/LmWMQb

Caseta portocalie are încă un indice Z mai mare decât cel albastru, dar este afișat în continuare în spatele acestuia. Acest lucru se datorează faptului că valoarea filtrului a făcut ca caseta roz să formeze un nou context de stivuire.

rezumat

Prin utilizarea indexului z pe elementele poziționate, putem schimba ordinea de stivuire implicită.

Atunci când se aplică anumite proprietăți CSS, un element poate forma un context de stivuire. Valorile indexului Z au doar o semnificație în același context de stivuire.

Pentru mai multe informații despre indexul z, vă recomand Acest articol. M-am inspirat foarte mult din asta când am scris acest lucru.

Mulțumesc pentru lectură! 🙂