Poziționarea elementelor suprapuse cu foi de stil în cascadă
Una dintre provocările când utilizați poziționarea CSS pentru aspectul paginii web este că unele dintre elementele dvs. se pot suprapune altora. Acest lucru funcționează bine dacă doriți ca ultimul element din codul HTML să se afle deasupra, dar dacă nu doriți sau dacă doriți să aveți elemente care în prezent nu se suprapun altora pentru a face acest lucru, deoarece designul solicită acest aspect "stratificat" ? Pentru a schimba modul de suprapunere a elementelor, trebuie să utilizați proprietatea CSS.
Dacă ați folosit unelte grafice în Word și PowerPoint sau un editor de imagini mai robust, cum ar fi Adobe Photoshop, probabil că ați văzut ceva de genul z-index în acțiune. În aceste programe, puteți să evidențiați obiectele pe care le-ați desenat și să alegeți o opțiune pentru "Trimitere înapoi" sau "Aduceți în față" anumite elemente ale documentului. În Photoshop, nu aveți aceste funcții, dar aveți panoul "Layer" al programului și puteți aranja unde un element intră în panza prin rearanjarea acestor straturi. În ambele exemple, în esență, setați indexul z al acestor obiecte.
Ce este indexul z?
Când utilizați poziționarea CSS pentru a poziționa elementele de pe pagină, trebuie să vă gândiți în trei dimensiuni. Există cele două dimensiuni standard: stânga / dreapta și partea de sus / de jos. Indicele de la stânga la dreapta este cunoscut ca indexul x, în timp ce partea de sus în jos este indexul y. Acesta este modul în care veți poziționa elementele orizontal sau vertical, utilizând acești doi indici.
Când vine vorba de designul web, există și ordinea de stivuire a paginii. Fiecare element de pe pagină poate fi stratificat deasupra sau dedesubtul oricărui alt element. Proprietatea indexului z determină locul în care se află fiecare element. Dacă indicele x și indexul y sunt liniile orizontale și verticale, atunci z-indexul este adâncimea paginii, în esență a dimensiunii a 3-a.
Îmi place să mă gândesc la elementele de pe o pagină web ca la bucăți de hârtie, iar pagina web în sine ca un colaj. Unde așeză hârtia este determinată de poziționare și cât de mult este acoperită de celelalte elemente este indexul z.
Indicele z este un număr, fie pozitiv (de ex. 100) sau negativ (de exemplu, -100). Indicele z este implicit 0. Elementul cu cel mai înalt index z este deasupra, urmat de următorul cel mai mare și așa mai departe până la cel mai mic z-index. Dacă două elemente au aceeași valoare din indexul z (sau nu este definită, adică utilizarea valorii implicite de 0), browserul le va plasa în ordinea în care apar în HTML.
Cum se utilizează z-index
Dați fiecărui element dorit în stivă o valoare diferită a indexului z. De exemplu, dacă am cinci elemente diferite:
- elementul 1 - indexul z de -25
- elementul 2 - indexul z de 82
- elementul 3 - indexul z nu este setat
- elementul 4 - z-index de 10
- elementul 5 - indexul z de -3
Acestea se vor stivui în următoarea ordine:
- element 2
- element 4
- element 3
- element 5
- element 1
Vă recomand să folosiți valori diferite ale indexului z pentru a stiveze elementele. În acest fel, dacă mai adăugați mai multe elemente în pagină mai târziu, aveți spațiu pentru a le plasa fără să trebuiască să ajustați valorile indexului z pentru toate celelalte elemente. De exemplu:
- 100 pentru elementul meu de top
- 0 pentru elementul meu intermediar
- -100 pentru elementul de jos
De asemenea, puteți da două elemente aceeași valoare z-index. Dacă aceste elemente sunt stivuite, ele vor fi afișate în ordinea în care sunt scrise în HTML, cu ultimul element de sus.
O notă, pentru ca un element să folosească efectiv proprietatea z-index, trebuie să fie un element de nivel de bloc sau să folosească un afișaj de "bloc" sau "inline-block" în fișierul dvs. CSS.
Articolul original de Jennifer Krynin. Editat pe 12/09/16 de către Jeremy Girard.