Această postare a fost publicată inițial pe Coder-Coder.com.

Z-index este o proprietate CSS care vă permite să poziționați elemente în straturi una peste alta. Este foarte util și sincer un instrument foarte important pentru a ști cum să îl folosești în CSS.

Din păcate, indexul z este una dintre acele proprietăți care nu se comportă întotdeauna într-un mod intuitiv. Pare simplu la început – un număr mai mare al indexului z înseamnă că elementul va fi deasupra elementelor cu numere mai mici ale indexului z. Dar există câteva reguli suplimentare care fac lucrurile mai complicate. Și nu puteți rezolva întotdeauna lucrurile setând indexul z la 999999! ?

Acest articol va explica în detaliu patru dintre cele mai frecvente motive pentru care indexul z nu funcționează pentru dvs. și exact modul în care îl puteți remedia.

Vom trece prin câteva exemple de coduri reale și le vom rezolva. După ce citiți acest articol, veți putea înțelege și evita acele capcane comune ale indexului Z!

Consultați versiunea video a acestei foi de parcurs pe canalul meu YouTube, Coder Coder.

Să verificăm primul motiv:

1. Elementele din același context de stivuire vor fi afișate în ordinea aspectului, cu ultimele elemente deasupra elementelor anterioare.

În primul nostru exemplu, avem un aspect relativ simplu care include 3 elemente principale:

  • O imagine de pisică
  • Un bloc alb cu text
  • O altă imagine a aceleiași pisici

Iată marcajul HTML pentru asta:

<div class="cat-top"></div> 

<div class="content__block"> Meow meow meow... </div> 

<div class="cat-bottom"></div>

În acest aspect, în mod ideal, dorim ca blocul alb de text să fie deasupra ambelor pisici.

Pentru a încerca să realizăm acest lucru, am adăugat câteva marje negative la CSS pentru ambele imagini de pisică, astfel încât acestea să se suprapună puțin cu blocul alb:

.cat-top { 
   margin-bottom: -110px; 
} 

.cat-bottom { 
   float: right; 
   margin-top: -120px; 
}

Cu toate acestea, arată așa:

Prima pisică este într-adevăr poziționată sub blocul de conținut alb, la fel cum dorim. Dar a doua imagine de pisică este poziționată deasupra blocului!

De ce se întâmplă asta?

Motivul acestui comportament se datorează ordin natural de stivuire pe pagina web. Aceste linii directoare stabilesc practic elementele care vor fi în partea de sus și care vor fi în partea de jos.

Chiar dacă elementele nu au setul lor de index z, există o rimă și motivul pentru care vor fi cele de sus.

În cazul nostru, niciunul dintre elemente nu are o valoare a indexului z. Deci ordinea lor de stivuire este determinată de ordinea lor de aspect. Conform acestei reguli, elementele care vin mai târziu în markup vor fi deasupra elementelor care vin înaintea lor.

(Puteți citi mai multe din liniile directoare privind ordinea de stivuire în rețeaua de dezvoltatori Mozilla Aici.)

În exemplul nostru cu pisicile și blocul alb, ei respectă această regulă. De aceea, prima pisică se află sub elementul bloc alb, iar blocul alb se află sub a doua pisică.

Ok, ordinea de stivuire este bine, dar cum putem remedia CSS, astfel încât a doua pisică să fie sub blocul alb?

Să ne uităm la al doilea motiv:

2. Elementul nu are poziția setată

Una dintre celelalte linii directoare care determină ordinea de stivuire este dacă un element are poziția stabilită sau nu.

Pentru a seta poziția unui element, adăugați CSS position proprietate pentru orice altceva decât static, ca relative sau absolute. (Puteți citi mai multe despre aceasta în Acest articol că am scris.)

Conform acestei reguli, elementele poziționate vor fi afișate deasupra elementelor nepoziționate.

Deci, setarea blocului alb să fie position: relative, și lăsând cele două elemente de pisică nepoziționate se va pune blocul alb pe partea superioară a pisicilor în ordinea de stivuire.

Așa va arăta – puteți juca și cu Codepen de mai sus.

4 motive pentru care indexul dvs z nu functioneaza si

Woo hoo!

Acum, următorul lucru pe care vrem să-l facem este să rotim pisica de jos cu capul în jos, folosind transform proprietate. În acest fel, ambele pisici vor fi sub blocul alb, cu doar capul în afară.

Dar acest lucru poate provoca mai mult z-index-confuzie legată. Vom aborda problema și soluția în partea următoare.

3. Setarea unor proprietăți CSS precum opacitatea sau transformarea va pune elementul într-un nou context de stivuire.

După cum tocmai am menționat, vrem să întoarcem pisica de jos cu susul în jos. Pentru a realiza acest lucru, vom adăuga transform: rotate(180deg).

.cat-bottom { 
   float: right; 
   margin-top: -120px; 
   transform: rotate(180deg); 
}

Dar acest lucru face ca pisica de jos să fie afișată din nou în partea de sus a blocului alb!

1612091530 321 4 motive pentru care indexul dvs z nu functioneaza si

Ce naiba se întâmplă aici ??

Este posibil să nu întâlniți această problemă des, dar un alt aspect al ordinii de stivuire este că unele proprietăți CSS le plac transform sau opacity va pune elementul în propriul său, nou context de stivuire.

Ceea ce înseamnă asta este că adăugarea transform la .cat-bottom element îl face să se comporte ca și cum ar fi avut un z-index de 0. Chiar dacă nu are al său position sau z-index setat deloc! (W3.org are ceva informativ, dar documentare destul de densă despre cum funcționează acest lucru cu opacity proprietate)

Amintiți-vă, nu am adăugat niciodată un z-index numai pentru blocul alb position: relative. Acest lucru a fost suficient pentru a poziționa blocul alb deasupra pisicilor nepoziționate.

Dar din moment ce .bottom-cat elementul acționează ca și când ar fi relativ poziționat cu z-index: 0, transformându-l l-a poziționat deasupra blocului alb.

Soluția la aceasta este setarea position: relative și stabilit în mod explicit z-index pe cel puțin blocul alb. Ați putea face un pas mai departe și ați stabilit position: relative iar o mai mică z-index pe elementele pisicii, doar pentru a fi mai sigur.

.content__block { 
   position: relative; 
   z-index: 2; 
} 

.cat-top, .cat-bottom { 
   position: relative; z-index: 1; 
}

În opinia mea, acest lucru va rezolva majoritatea, dacă nu chiar toate problemele de bază ale indexului z.

Acum, să trecem la ultimul nostru motiv pentru care z-index nu funcționează. Acesta este puțin mai complex, deoarece implică elemente părinte și copil.

4. Elementul se află într-un context de stivuire mai redus datorită nivelului de index z al părintelui său

Să vedem exemplul nostru de cod pentru acest lucru:

Iată ce avem: o pagină web simplă cu conținut obișnuit și o filă laterală roz care spune „Trimiteți feedback” care este poziționată deasupra conținutului.

Apoi, când faceți clic pe fotografia pisicii, se deschide o fereastră modală cu un strat transparent de fundal gri.

Cu toate acestea, chiar și atunci când fereastra modală este deschisă, fila laterală este încă în partea superioară a suprapunerii gri. Vrem ca suprapunerea să fie afișată peste orice, inclusiv fila laterală.

Să aruncăm o privire la CSS pentru elementele în cauză:

.content { 
   position: relative; 
   z-index: 1; 
} 

.modal { 
   position: fixed; 
   z-index: 100; 
} 

.side-tab { 
   position: fixed; 
   z-index: 5; 
}

Toate elementele au poziția setată, iar fila laterală are un z-index din 5, care îl poziționează deasupra elementului de conținut, care este la z-index: 1.

Apoi, modalul are z-index: 100 care ar trebui să puneți-l deasupra filei laterale la z-index: 5. Dar, în schimb, suprapunerea modală se află sub fila laterală.

De ce se întâmplă asta?

Anterior, am abordat câțiva factori care intră în contextul de stivuire, cum ar fi dacă elementul are poziția stabilită, precum și ordinea în marcare.

Dar încă un alt aspect al contextului de stivuire este că un element copil este limitat la contextul de stivuire al părintelui său.

Să aruncăm o privire mai atentă asupra celor trei elemente în cauză.

Iată marcajul pe care îl avem:

<section class="content">            
    <div class="modal"></div>
</section>

<div class="side-tab"></div>

Privind marcajul, putem vedea că conținutul și elementele filei laterale sunt frați. Adică, există la același nivel în markup (acest lucru este diferit de nivelul indexului z). Iar modalul este un element copil al elementului conținut.

Deoarece modalul este în interiorul elementului de conținut, este z-index 100 are doar un efect în interiorul părintelui său, elementul de conținut. De exemplu, dacă au existat și alte elemente copil care erau frați la modal, lor z-index valorile le-ar pune una deasupra sau sub cealaltă.

Cu exceptia z-index valoarea acestor elemente copil nu înseamnă nimic în afara părintelui, deoarece elementul conținut părinte are propriul său element z-index setat la 1.

Deci, copiii săi, inclusiv modalitatea, nu pot ieși din asta z-index nivel.

(Îl puteți aminti cu această metaforă ușor deprimantă: un copil poate fi limitat de părinți și nu se poate elibera de ei.)

Există câteva soluții la această problemă:

Soluție: Mutați modalitatea în afara părintelui conținut și în contextul principal de stivuire a paginii.

Marcajul corectat ar arăta astfel:

<section class="content"></section>

<div class="modal"></div>

<div class="side-tab"></div>

Acum, elementul modal este un element frate cu celelalte două. Aceasta pune toate cele trei elemente în același context de stivuire ca și ele, astfel încât fiecare dintre nivelurile lor de index z se vor afecta acum unul pe celălalt.

În acest nou context de stivuire, elementele se vor afișa în următoarea ordine, de sus în jos:

  • modal (z-index: 100)
  • filă laterală (z-index: 5)
  • conținut (z-index: 1)

Soluție alternativă: eliminați poziționarea din conținut, astfel încât să nu limiteze indexul z al modalității.

Dacă nu doriți sau nu puteți modifica marcajul, puteți remedia această problemă prin eliminarea position setare din elementul de conținut:

.content { 
   // No position set 
} 

.modal { 
   position: absolute; 
   z-index: 100; 
} 

.side-tab { 
   position: absolute; 
   z-index: 5; 
}

Deoarece elementul de conținut este acum nepoziționat, nu va mai limita modalitatea z-index valoare. Deci, modalitatea deschisă va fi poziționată deasupra elementului de filă laterală, datorită faptului că este mai mare z-index din 100.

În timp ce acest lucru funcționează, eu personal aș alege prima soluție.

Deoarece dacă, din anumite motive, în viitor va trebui să poziționați elementul de conținut, acesta va limita din nou ordinea modalului în contextul stivuirii.

În concluzie

Sper că ți s-a părut util acest tutorial! Pentru a rezuma, majoritatea problemelor cu indexul z pot fi rezolvate urmând aceste două linii directoare:

  1. Verificați dacă elementele au poziția setată și numerele indexului z în ordinea corectă.
  2. Asigurați-vă că nu aveți elemente părinte care să limiteze z-index nivelul copiilor lor.

Vreau mai mult?

Creez un curs de design receptiv! Înscrieți-vă aici pentru a primi un e-mail când este publicat.

Scriu tutoriale de dezvoltare web pe blogul meu coder-coder.com, postează mini-sfaturi pe Instagram și tutoriale de codificare pe YouTube.