CSS de la A la Z: proprietate z-index. Un alt blog independent
Pătratul roz are o valoare z-index, alta decât auto, ceea ce creează un nou context de suprapunere. Apariția unui context de suprapunere afectează modul în care elemente copil.
Puteți schimba ordinea de stivuire a copiilor pătratului roz. Cu toate acestea, lor z-index are sens doar în contextul unei suprapuneri. Aceasta înseamnă că nu vom putea plasa pătratul portocaliu în fața celui albastru deoarece se află în contexte diferite de suprapunere.
Dacă dorim ca pătratele albastre și portocalii să facă parte din același context de suprapunere, putem face din pătratul albastru un copil al pătratului roz. Acest lucru va muta pătratul albastru în spatele celui portocaliu.
Contextul de suprapunere este creat nu numai prin aplicarea proprietății z-index. Există câteva alte proprietăți care determină elementele să creeze contexte suprapuse. Câteva exemple: filtru, opacitate și transformare.
Să revenim la exemplul nostru anterior. Patrat albastru din nou asociat cu roz. De data aceasta, în loc să adăugăm o proprietate z-index la pătratul roz, îi vom aplica un filtru.
Albastru, .roz, .portocaliu (
poziție: absolută;
) .roz (
filtru: rotire nuanță (20deg);
) .albastru (
indicele z: 2;
) .portocale (
indicele z: 3;
) .verde (
indicele z: 100;
}
Pătratul portocaliu are încă un z-index mai mare decât cel albastru, dar apare în continuare în spatele lui. Acest lucru se datorează faptului că valoarea filtrului a determinat pătratul roz să creeze un nou context de suprapunere.
rezumat
Folosind indexul z pe elementele poziționate, putem schimba ordinea implicită de stivuire a elementelor.
Când sunt aplicate anumite proprietăți CSS, un element poate forma un context de suprapunere. Valorile indexului Z sunt semnificative doar în același context de suprapunere.
Pentru obtinerea Informații suplimentare despre cum funcționează proprietatea z-index, vă recomand să citiți acest articol. Ea a fost cea care m-a inspirat în timp ce lucram la această publicație.
Proprietatea z-index controlează ordinea de aplicare elementele poziționate atunci când se suprapun între ele. Proprietatea acceptă valori întregi pozitive și negative.
Într-un flux normal, poziţia: elementele statice sunt aşezate secvenţial unul după altul în ordinea în care sunt definite în documentul html. Valoarea implicită este z-index: auto; .
Orez. 1. Poziţionarea elementelor de-a lungul axei Z Proprietatea z-index specifică ordinea elementelor de-a lungul axei Z În mod normal, elementele cu o valoare de indice mare se vor suprapune elemente cu o valoare mai mică și o valoare automată, plasându-le în prim-plan.
Orez. 2. Impactul proprietății z-index asupra elementelor poziționate Suprapunerea contextului
Dacă indicele z și proprietățile de poziție ale elementelor nu sunt setate în mod explicit, contextul de suprapunere este egal cu ordinea în care apar în cod sursa. Dacă elementele nu au un index z specificat, browserul redă elementele pe pagină în următoarea ordine:
Element rădăcină
Elementele poziționate în ordinea în care apar în codul sursă. Ultimul va fi situat în prim-plan.
Orez. 3. Ordinea implicită a elementelor în spațiul 3D 
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
După cum se poate observa din figură, un element cu poziție: absolut; este în prim plan, urmat de text, sub acesta sunt elemente plutitoare cu float: stânga; , elementele bloc nepoziționate sunt plasate în fundal (deoarece elementele plutitoare și poziționate sunt îndepărtate din flux, elementele nepoziționate la nivel de bloc le ignoră și sunt plasate unul după altul, în conformitate cu marcajul, deci elementul .
Proprietatea z-index creează un nou context de suprapunere. Vă permite să schimbați ordinea de stivuire elemente poziționate. Elementele vor fi afișate pe pagină în următoarea ordine (dacă nu sunt setate la proprietăți care afectează contextul de suprapunere - opacitate, filtru, transformare):
Element rădăcină , care conține toate elementele unei pagini web.
Elemente poziționate cu o valoare negativă a indicelui z.
Elemente bloc, care nu sunt plutitoare sau poziționate.
Flotantele flotante nu sunt elemente poziționate în ordinea în care apar în codul sursă.
Elemente nepoziționate în linie (text, imagini).
Elemente poziționate cu valori z-index: 0; și z-index: auto; .
Elemente poziționate cu valori pozitive ale indicelui z. O valoare mare a indicelui va reda elementul în prim-plan. Elementele cu valori z-index egale vor fi redate în funcție de locația lor în codul sursă.
Orez. 4. Proprietatea z-index creează un nou context pentru suprapunerea elementelor în spațiul 3D Majoritatea proprietăților CSS sunt destul de ușor de utilizat. Adesea, aplicarea unei proprietăți CSS unui element din marcajul dvs. va produce rezultate imediate - de îndată ce reîmprospătați pagina, setul de valori al proprietății va fi aplicat și veți vedea imediat rezultatul. Alte proprietăți CSS, totuși, sunt mai complexe și vor funcționa numai după setarea unui anumit set de condiții.
Proprietatea z-index aparține ultimului grup de proprietăți. Această proprietate a provocat confuzie larg răspândită și frustrare mai des decât orice altă proprietate CSS existentă. În mod ironic, totuși, când ajungi să cunoști indicele z, veți realiza că această proprietate este foarte simplă și oferă o metodă eficientă pentru rezolvarea multor probleme de aspect.
În acest articol, veți afla ce este indexul z, cum poate fi interpretat greșit și câteva exemple de utilizare. În plus, veți învăța câteva diferențe în comportamentul browserului atunci când gestionați proprietatea z-index, afectând în principal versiunile anterioare de Internet Explorer și Firefox. Această prezentare detaliată a z-index va oferi dezvoltatorilor o bază excelentă pentru utilizarea acestei proprietăți în mod sigur și eficient.
Ce este?
Proprietate indicele z definește nivelul de stivă al unui element HTML. „Nivelul stivei” se referă la poziția unui element pe axa Z (direcțional perpendicular pe axa X sau axa Y). Elementul căruia i se atribuie cea mai mare valoare z-index va fi poziționat chiar în partea de sus a stivei de straturi. Acest teanc de straturi este poziționat perpendicular pe ecran sau pe zona de vizualizare.
Vedere 3D a axei Z:
Pentru a demonstra cum funcționează indicele z, imaginea de mai sus mărește ușor afișarea elementelor stivei în raport cu fereastra.
Ordine normală de stivă
Pe o pagină HTML, ordinea normală a stivei (adică ordinea elementelor pe axa Z) este determinată de un număr de factori. Următoarea este o listă care arată ordinea în care sunt stivuite elementele, începând de jos. Nu există elemente în această listă cu proprietatea z-index atribuită:
- Fundalul și chenarul unui element care creează contextul stivei
- Elemente cu context negativ de stivă, în ordinea apariției
- Elemente bloc nepoziționate, neplutitoare, în ordinea apariției
- Elemente nepoziţionate, plutitoare, în ordinea apariţiei
- Elemente în linie, în ordinea apariției
- Elemente poziționate, în ordinea apariției
Când proprietatea z-index este utilizată corect, poate schimba ordinea normală a stivei.
Desigur, ordinea elementelor dintr-o stivă nu este la fel de clară atâta timp cât elementele sunt poziționate suprapunându-se. Prin urmare, pentru a vedea ordinea normală a stivei, se pot folosi marjele negative așa cum se arată mai jos:
Bloc gri
Bloc albastru
Bloc maro
Blocurilor prezentate mai sus li se atribuie culori diferite de fundal și chenar, iar ultimelor două blocuri li se atribuie în mod specific o umplutură superioară negativă pentru a ilustra ordinea normală de stivuire. Blocul gri apare primul în aspect, blocul albastru al doilea, iar blocul maro al treilea. Marjele negative atribuite demonstrează perfect acest fapt. Aceste elemente nu au valori atribuite indicele z, sunt localizate pe pagină în ordinea obișnuită sau implicit. Se suprapun reciproc datorită marjelor negative.
De ce există confuzie?
Deși z-index nu este o proprietate dificil de înțeles, dacă este interpretat greșit, poate fi confuz pentru dezvoltatorii începători. Această concepție greșită apare deoarece proprietatea z-index va funcționa numai pentru un element care are proprietatea de poziție setată la una dintre cele trei valori: absolut, fix sau relativ.
Pentru a demonstra că z-index funcționează numai pe elementele poziționate, iată aceleași trei blocuri, împreună cu valorile z-index aplicate pentru a schimba ordinea normală a stratului:
Bloc gri
Bloc albastru
Bloc maro
Blocul gri are o valoare z-index setată la „9999”; blocul albastru are o valoare z-index setată la „500”; și blocul maro, valoarea z-index este setată la „1”. Ar fi logic să presupunem că ordinea în care sunt stivuite blocurile ar trebui să se schimbe. Dar acest lucru nu s-a întâmplat în acest exemplu, deoarece niciunul dintre aceste elemente nu avea o proprietate de poziție atribuită.
Iată aceleași blocuri, dar cu poziția: proprietatea relativă adăugată fiecăruia dintre ele și proprietățile z-index atribuite anterior:
Bloc gri
Bloc albastru
Bloc maro
Acum, am obținut rezultatul dorit: ordinea elementelor s-a schimbat; blocul gri se suprapune pe albastru, iar albastrul, la rândul său, se suprapune pe maro.
Sintaxă
Proprietatea z-index poate afecta ordinea stratului atât a elementelor bloc, cât și a elementelor inline și este setată prin alocarea unei valori pozitive sau negative, întregi sau automate. Valoarea auto dă elementului aceeași ordine a stratului ca și elementul părinte.
Iată cum arată codul CSS pentru al treilea exemplu, unde proprietatea z-index este aplicată corect:
#grey_box ( lățime: 200px; înălțime: 200px; chenar: solid 1px #ccc; fundal: #ddd; poziție: relativ; z-index: 9999; ) #blue_box ( lățime: 200px; înălțime: 200px; chenar: solid 1px # 4a7497; fundal: #8daac3; index z: 500;
Din nou, merită să reamintim din nou, în special pentru dezvoltatorii începători, că proprietatea z-index nu va funcționa până când nu aplicați poziționarea elementului.
Folosind JavaScript
Dacă doriți să schimbați dinamic valoarea z-index a unui element folosind JavaScript, este destul de simplu. Sintaxa este aceeași ca pentru accesarea majorității proprietăților CSS, trebuie doar să înlocuiți proprietățile CSS cu silabe cu cod, așa cum se arată mai jos:
Var myElement = document.getElementById("cutie_aur"); myElement.style.position = „rudă”; myElement.style.zIndex = "9999";
După cum se arată în exemplu, proprietatea CSS „z-index” este scrisă ca „zIndex”. De asemenea, „culoare-fond” devine „culoare fundal”, „greutate font” devine „greutate font” și așa mai departe.
De asemenea, folosind codul de mai sus, proprietatea de poziție este modificată deoarece z-index va funcționa numai pe un element poziționat.
Procesare incorectă în IE și Firefox
În anumite circumstanțe, unele browsere pot trata proprietatea z-index în mod diferit, inclusiv versiunile Internet Explorer 6 și 7 și Firefox versiunea 2.
Elemente
În Internet Explorer 6, elementul
Element
– Selectați anul – 2009 2010 2011
Bloc maro
Dacă te uiți la acest exemplu, folosind browserul IE6, vei vedea că elementul
Această eroare în IE6 cauzează probleme cu meniurile drop-down care nu se pot suprapune elementelor