z-index proprietatea CSS este una dificilă. Nu va funcționa ușor de la sine, dacă nu știți cum să îl utilizați corect.

Deci, în această postare, voi explica ce este z-index proprietatea este, ce este ordinea de stivuire și cum să le utilizați în modul corect.

Voi da, de asemenea, câteva exemple comune de ce z-index este posibil ca proprietatea să nu funcționeze și să vă arate și soluțiile.

Ce este indicele Z?

În primul rând, caracterul Z provine din reprezentarea a trei dimensiuni x, y și z. x și y reprezintă lățimea și înălțimea, iar a 3-a dimensiune, Z, înseamnă adâncimea:

Indexul CSS Z nu functioneaza Cum se remediaza folosind Comanda

CSS oferă o proprietate numită z-index astfel încât să-l putem folosi pentru a determina adâncimea unui element. Dupa cum z-index valoarea unui element crește, acesta va fi poziționat în fața altor elemente în ceea ce privește a 3-a dimensiune.

Să trecem mai departe cu câteva exemple și să vedem cum să utilizați z-index în mod corect.

Z-Index nu funcționează fără o poziție sau poziție definită: statică

Primul lucru important de știut este că fiecare element de pe o pagină web are o poziție implicită – cu alte cuvinte, o poziție definită static (implicit). Să presupunem că avem o cutie roșie și una albastră pe pagina noastră:

<div class="box box-red"></div>
<div class="box box-blue"></div>
1611056045 637 Indexul CSS Z nu functioneaza Cum se remediaza folosind Comanda

Dacă aplicați z-index direct la cutii, veți vedea că nu va funcționa. Acest lucru se datorează faptului că nu au încă o poziție definită:

.box {
  height: 150px;
  width: 150px;
}

.box-red {
  background: red;
  z-index: 1;
}

.box-blue {
  background: #00d5f1;
  bottom: 80px;
  left: 55px;
  z-index: 2;
}

Acesta este unul dintre cele mai frecvente exemple de ce z-index nu funcționează corect. Pentru a o rezolva, putem aplica o proprietate de poziție clasei box care va face trucul:

.box {
  height: 150px;
  width: 150px;
  position: relative;
}
1611056045 265 Indexul CSS Z nu functioneaza Cum se remediaza folosind Comanda

De asemenea, puteți viziona videoclipul meu tutorial pentru a vedea exemplul de utilizare a indexului z:

Ce este Ordinul de Stivuire?

Dacă eliminăm z-index din ambele casete, caseta albastră va fi în continuare poziționată în fața casetei roșii, chiar dacă nu există z-index proprietate mai:

.box {
  height: 150px;
  width: 150px;
  position: relative;
}

.box-red {
  background: red;
}

.box-blue {
  background: #00d5f1;
  bottom: 80px;
  left: 55px;
}

Ceea ce redă următoarele:

1611056045 78 Indexul CSS Z nu functioneaza Cum se remediaza folosind Comanda

Deci, atunci când elementele sunt toate la același nivel, un element va fi în continuare în fața celuilalt, deoarece au și o ordine implicită în ceea ce privește axa Z. Aceasta se numește ordinea de stivuire.

Ca în exemplul de mai sus, când nu există z-index aplicate unui element, browserele folosesc o ordine de stivuire implicită pentru a stiva elemente de pe pagină:

1. Fundalul și marginile elementului rădăcină
2. Descendent ne-poziționat blocuri, în ordinea apariției în HTML
3. Descendent poziționat elemente, în ordinea apariției în HTML

Sursă: Stivuirea fără proprietatea indexului z

Rețineți că elementul rădăcină se referă la <html> element, în timp ce elementele nepoziționate sunt cele cu valoarea implicită position: static, și elementele poziționate sunt elemente cu position setat la o altă valoare.

Dacă adăugăm o altă casetă, dar setăm-o position atributul implicit static, va apărea în spatele casetelor albastre și roșii:

<div class="box box-red"><p>Positioned</p></div>
<div class="box box-blue"><p>Positioned</p></div>
<div class="box box-yellow"><p>Non-positioned</p></div>
.box {
  height: 150px;
  width: 150px;
  position: absolute;
}

p {
  color: #0a0a23;
  margin: 0;
  padding-left: 5px;
}

.box-red {
  background: red;
  top: 40px;
  left: 27px;
}

.box-blue {
  background: #00d5f1;
  top: 80px;
  left: 55px;
}

.box-yellow {
  background: rgb(251, 239, 0);
  position: static;
}

Care produce următoarele:

1611056045 159 Indexul CSS Z nu functioneaza Cum se remediaza folosind Comanda

În timp ce am modificat casetele albastre și roșii pentru a le utiliza position: absolute in loc de relative, și reglați un pic plasarea lor, acest lucru ajută la afișarea ordinii de stivuire implicite a browserului – elementele poziționate pe același nivel vor apărea întotdeauna peste ne-poziționate (sau position: static) elemente.

Acum s-ar putea să vă întrebați ce se întâmplă atunci când elementele nu sunt la același nivel. Să sapăm în asta acum.

Context de stivuire: Cum se aplică și indicele Z al elementului părinte copiilor

Să presupunem că am pus o cutie galbenă între cea roșie și cea albastră:

<div class="box box-red">
  <div class="box box-yellow"></div>
</div>
<div class="box box-blue"></div>
.box-red {
  background: red;
  z-index: 1;
}

.box-blue {
  background: #00d5f1;
  bottom: 80px;
  left: 55px;
  z-index: 2;
}

.box-yellow {
  background: rgb(251, 239, 0);
  left: 25px;
  top: 25px;
  z-index: 3;
}

Ceea ce redă următoarele:

1611056045 201 Indexul CSS Z nu functioneaza Cum se remediaza folosind Comanda

Acum, după cum vedeți în cod, chiar dacă caseta galbenă are o valoare mai mare z-index valoare comparată cu cea albastră, este poziționată în spatele cutiei albastre.

Acest lucru se datorează faptului că caseta galbenă este copilul casetei roșii și z-index elementului părinte se aplică întotdeauna și copiilor săi. Deoarece elementul părinte are un indice Z mai mic, copiii săi moștenesc același lucru z-index valoare, de asemenea.

Acest lucru se datorează ceva numit context de stivuire. Pur și simplu, un context de stivuire este ca o nouă instanță a listei de ordine de stivuire dinainte:

  1. Un element HTML rădăcină
  2. Elemente nepoziționate (position: static) în ordinea în care apar
  3. Elemente poziționate (position este setat la o altă valoare) în ordinea în care apar

Principalul lucru de reținut este că un element poziționat cu un z-index valoare pe lângă valoarea implicită auto va crea un nou context de stivuire.

Așadar, uitându-ne la HTML-ul nostru de mai sus, deoarece caseta roșie are un z-inxex din 1, creează un nou context de stivuire pentru copilul său, caseta galbenă. În acel context de stivuire, caseta roșie servește ca element HTML rădăcină, iar caseta galbenă este un element poziționat în interiorul acestuia.

Apoi, deoarece caseta albastră face parte din același context de stivuire ca și caseta roșie (unde <html> element servește ca element rădăcină), va apărea întotdeauna deasupra casetei galbene.

Dacă vedeți acest tip de problemă, îl puteți rezolva fie prin scoaterea elementului copil din părintele său, fie prin eliminarea proprietății poziției părintelui, astfel încât z-index nu îi va afecta copiii:

<div class="box box-red"></div>
<div class="box box-yellow"></div>
<div class="box box-blue"></div>
.box {
  height: 150px;
  width: 150px;
  position: relative;
}

.box-red {
  background: red;
  z-index: 1;
}

.box-blue {
  background: #00d5f1;
  bottom: 240px;
  left: 55px;
  z-index: 2;
}

.box-yellow {
  background: rgb(251, 239, 0);
  bottom: 120px;
  left: 25px;
  z-index: 3;
}

Ceea ce ne oferă:

1611056045 148 Indexul CSS Z nu functioneaza Cum se remediaza folosind Comanda

Rețineți că există o serie de alte proprietăți care afectează contextul de stivuire al unui element. Puteți citi mai multe despre ele aici.

Deoarece este puțin neintuitiv, acesta este unul dintre cele mai frecvente motive pentru care z-index nu merge.

Nu atribuiți numere mari indexului Z

Un alt motiv comun pentru care z-index s-ar putea să nu funcționeze se datorează faptului că uneori oamenii atribuie numere foarte mari la z-index proprietate:

.box-blue {
  z-index: 9999;
}

În câteva proiecte la care am lucrat în trecut, am văzut deseori oameni atribuind aceste numere foarte mari, cum ar fi 9999 z-index a unui element.

Sigur că funcționează, dar este ca și cum ai folosi un ciocan atunci când ai nevoie cu adevărat de o șurubelniță.

Imaginați-vă așa – intrați într-un proiect mare și lucrați la un anumit cod HTML, dar indiferent de ceea ce încercați, nu puteți obține elementele să apară în ordinea corectă. Deci, după o grămadă de săpături și căutări online, veți afla că cineva la un moment dat a stabilit o globală z-index proprietate la 9999, care continuă să suprascrie z-index.

Acum, că știi cum să folosești z-index corect și înțelegeți contextul de stivuire, nu ar trebui să utilizați valori mari ca aceasta 🙂

Sper că această postare te-a ajutat să înțelegi mai bine cum să folosești z-index proprietate, împreună cu ordinea de stivuire și contextul de stivuire. Dacă doriți să aflați mai multe despre dezvoltarea web, nu uitați abonează-te la canalul meu.

Mulțumesc că ai citit!