4 motive pentru care indicele dvs. z nu funcționează (și cum să îl remediați)

Z-index este o proprietate CSS care vă permite să poziționați elemente în straturi una peste alta. Este foarte util și, sincer, este un instrument foarte important pentru a ști să 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 de indici z înseamnă că elementul va fi deasupra elementelor cu numere mai mici de indice z. Există însă câteva reguli suplimentare care fac lucrurile mai complicate. Și nu puteți repara întotdeauna lucrurile setând indexul z la 999999!

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

Vom parcurge câteva exemple de coduri reale și le vom rezolva problemele. După citirea acestui articol, veți putea înțelege și evita acele capcane comune ale indexului z!

Să verificăm primul motiv:

1. Elementele din același context de stivuire vor apărea în ordinea apariției, cu ultimele elemente pe partea de sus a elementelor anterioare.

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

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

Iată marcajul HTML pentru asta:

Meow meow meow ...

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

Pentru a încerca să obținem acest lucru, am adăugat câteva marje negative la CSS pentru ambele imagini de pisici, astfel încât acestea să se suprapună puțin blocului alb:

.cat-top {
   margine-jos: -110px;
}
.cat-bottom {
   float: dreapta;
   margin-top: -120px;
}

Cu toate acestea, arată astfel:

Prima pisică este într-adevăr poziționată sub blocul de conținut alb, exact așa cum ne dorim. Dar a doua imagine de pisică este poziționată în partea de sus a blocului!

De ce se întâmplă asta?

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

Chiar dacă elementele nu au setul lor de indici z, există o rimă și un motiv pentru care vor fi cele mai importante.

În cazul nostru, niciunul dintre elemente nu are o valoare a indicelui z. Deci ordinea lor de stivuire este determinată de ordinea lor de apariție. În conformitate cu această regulă, elementele care vin mai târziu în marcaj vor fi deasupra elementelor care vin înaintea lor.

(Puteți citi mai multe din ghidurile comenzilor de stivuire la Mozilla Developer Network aici.)

În exemplul nostru cu pisicile și blocul alb, acestea se supun acestei reguli. Acesta este motivul pentru care prima pisică se află sub elementul bloc alb, iar blocul alb este sub cea de-a doua pisică.

Bine, comanda de stivuire este bine și bine, dar cum să remediem CSS-ul, astfel încât a doua pisică să se afle sub blocul alb?

Să ne uităm la al doilea motiv:

2. Elementul nu are poziția sa setată

Una dintre celelalte linii directoare care determină ordinea stivuirii este dacă un element are poziția sa setată sau nu.

Pentru a seta poziția pentru un element, adăugați proprietatea poziției CSS la orice altceva decât static, cum ar fi relativ sau absolut. (Puteți citi mai multe despre asta în acest articol pe care l-am scris.)

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

Așadar, setarea blocului alb să fie poziție: relativă și lăsând cele două elemente de pisică nepoziționate va pune blocul alb pe partea superioară a pisicilor în ordinea stivuirii.

Așa va arăta - puteți să vă jucați și cu Codepenul de mai sus.

Woo hoo!

Acum, următorul lucru pe care vrem să-l facem este să rotim pisica de jos în sus, folosind proprietatea de transformare. În acest fel, ambele pisici vor fi sub blocul alb, doar capetele rămânând afară.

Dar acest lucru poate provoca mai multă confuzie legată de indicele z. Vom aborda problema și soluția în următoarea parte.

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

După cum am menționat, vrem să întoarcem pisica de jos în sus. Pentru a realiza acest lucru, vom adăuga transformare: rotire (180deg).

.cat-bottom {
   float: dreapta;
   margin-top: -120px;
   transformați: rotiți (180deg);
}

Dar asta face ca pisica de jos să fie afișată din nou pe partea de sus a blocului alb!

Ce naiba se întâmplă aici ??

Este posibil să nu vă confruntați frecvent cu această problemă, dar un alt aspect al ordinii de stivuire este faptul că unele proprietăți CSS, cum ar fi transformarea sau opacitatea, vor pune elementul în propriul său nou context de stivuire.

Ceea ce înseamnă asta este că adăugarea transformării la elementul .cat-jos o face să se comporte ca și când ar avea un indice z de 0. Chiar dacă nu are deloc poziția sau indicele z set! (W3.org are o documentare informativă, dar destul de densă despre cum funcționează aceasta cu proprietatea opacității)

Nu uitați, nu am adăugat niciodată o valoare a indexului z la blocul alb, doar poziția: relativă. Acest lucru a fost suficient pentru a poziționa blocul alb deasupra pisicilor nepoziționate.

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

Soluția la aceasta este să setați poziția: relativ și să setați explicit indicele z pe cel puțin blocul alb. Puteți merge cu un pas mai departe și setați poziția: relativă și un indice z inferior asupra elementelor pisicii, doar pentru a fi în siguranță.

.content__block {
   poziție: relativă;
   index z: 2;
}
.cat-top, .cat-bottom {
   poziție: relativă; index z: 1;
}

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

Acum, să trecem la ultimul nostru motiv pentru care indicele dvs. z nu funcționează. Acesta este un pic mai complex, deoarece implică elemente ale părintelui și ale copilului.

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

Să consultăm 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 o suprapunere de fundal gri transparent.

Cu toate acestea, chiar și atunci când fereastra modală este deschisă, fila laterală este încă deasupra acoperirii gri. Dorim să fie afișată suprapunerea peste tot, inclusiv fila laterală.

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

.content {
   poziție: relativă;
   index z: 1;
}
.modal {
   poziție: fix;
   index z: 100;
}
.side-tab {
   poziție: fix;
   index z: 5;
}

Toate elementele au setul de poziție, iar fila laterală are un indice z de 5, care îl poziționează deasupra elementului de conținut, care se află la indexul z: 1.

Apoi, modalul are z-index: 100, care ar trebui să-l plaseze în partea de sus a filei laterale la z-index: 5. Dar, în schimb, suprapunerea modală este sub fila laterală.

De ce se întâmplă asta?

Anterior, am abordat unii factori care intră în contextul de stivuire, cum ar fi dacă elementul are poziția sa setată, precum și ordinea sa în marcaj.

Dar încă un aspect al contextului de stivuire este faptul 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:

    

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

Deoarece modalul se află în interiorul elementului de conținut, indicele său z de 100 are doar un efect în interiorul părintelui său, elementul conținut. De exemplu, dacă ar exista și alte elemente ale copiilor care sunt frați cu modalitatea, valorile indexului z le-ar pune unul peste celălalt sau unul sub celălalt.

Dar valoarea indexului z a acelor elemente copil nu înseamnă nimic în afara părintelui, deoarece elementul conținut părinte are setul său z-index 1.

Deci, copiii săi, inclusiv modalul, nu se pot dezlipi de acel nivel de index z.

(Îți poți aminti acest lucru cu această metaforă ușor deprimantă: un copil poate fi limitat de părinții săi și nu îi poate elibera.)

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

Soluție: mutați modalul în afara părinței de conținut și în contextul principal de stivuire a paginii.

Marcarea corectată ar arăta astfel:

Acum, elementul modal este un element de frate al celorlalți doi. Acest lucru pune toate cele trei elemente în același context de stivuire ca ele, astfel încât fiecare dintre nivelul lor de indici z va afecta acum unul pe celălalt.

În acest nou context de stivuire, elementele vor fi afișate în ordinea următoare, de sus în jos:

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

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

Dacă nu doriți sau nu puteți modifica marcajul, puteți remedia această problemă eliminând setarea de poziție din elementul de conținut:

.content {
   // Nicio poziție setată
}
.modal {
   poziție: absolută;
   index z: 100;
}
.side-tab {
   poziție: absolută;
   index z: 5;
}

Deoarece elementul de conținut este acum nepoziționat, acesta nu va mai limita valoarea indexului z al modalității. Deci, modalitatea deschisă va fi poziționată în partea superioară a elementului filei laterale, datorită indexului z superior de 100.

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

Deoarece, dacă în viitor, trebuie să poziționați elementul de conținut, acesta va limita din nou comanda modalului în contextul de stivuire.

În concluzie

Sper că ai găsit acest tutorial util! Pentru a rezuma, cele mai multe probleme cu index-z pot fi rezolvate urmând aceste două orientări:

  1. Verificați dacă elementele au setul de poziție și numerele indexului z în ordinea corectă.
  2. Asigurați-vă că nu aveți elemente parentale care limitează nivelul de index z al copiilor lor.

Resurse:

  • W3.org: Transparență: proprietatea „opacitate”
  • W3.org: Specificarea nivelului stivei
  • Rețeaua de dezvoltatori Mozilla: Contextul stivuirii
  • PhilipWalton.com: Ce nu te-a spus nimeni despre indicele Z
  • Smashing Magazine: Proprietatea CSS index-Z

Vreau mai mult?

Citiți mai multe tutoriale pe blogul meu, coder-coder.com.
Înscrieți-vă aici pentru a primi e-mailuri despre articole noi.
Alăturați-vă altor 25.000 de persoane - Urmați @thecodercoder pe Instagram.