Share
z-index proprietatea în CSS pare destul de simplă, dar există multe de descoperit sub suprafață dacă vrei cu adevărat să înțelegi cum funcționează. În acest tutorial vom clarifica funcționarea interioară a z-indexului, privindu-ne stivuirea contextelor și câteva exemple practice.
CSS oferă trei scheme de poziționare diferite pentru dispunerea cutiilor:
Ultimul elimină complet un element din fluxul normal și se bazează pe dezvoltator pentru a spune elementului unde să afișeze.
Dați-i valorile de sus, de stânga, de jos și de dreapta pentru a poziționa elementul în spațiu bidimensional, dar CSS vă permite de asemenea să îl plasați în a treia dimensiune utilizând proprietatea z-index.
Pe suprafață, indexul z pare a fi o proprietate ușor de folosit. Stabiliți valori pentru a determina unde va fi amplasat elementul pe această a treia axă și ați terminat. Sub suprafata se pot face mai multe descoperiri, incluzand un numar de reguli pentru care tipuri de elemente stau pe partea de sus a altora.
Să începem cu elementele de bază pentru a ne asigura că suntem toți pe aceeași pagină și apoi vom vorbi despre stivuire pentru a înțelege mai multe despre ce se întâmplă cu z-indexul din spatele scenei.
Sunt sigur că sunteți familiarizat cu spațiul tridimensional de coordonate. Avem o axă x care este de obicei folosită pentru a reprezenta orizontala, o axă y pentru a reprezenta verticala și o axă z pentru a reprezenta ceea ce se întâmplă în și din pagină sau ecranul în cazul nostru.
Nu vorbim literalmente vedea axa z, deoarece ecranul este un plan bidimensional. Vedem aceasta sub forma unei perspective și a unor elemente care apar în fața sau în spatele altor elemente atunci când împărtășesc același spațiu bidimensional.
Pentru a determina unde se află un element de-a lungul acestei a treia axe, CSS ne permite să setăm trei valori pe proprietatea indexului z.
Pentru moment, să ne concentrăm asupra valorii întregului. Aceasta poate fi pozitivă, negativă sau 0. Cu cât valoarea este mai mare, cu atât mai aproape de vizualizator elementul apare. Cu cât valoarea este mai mică, cu atât mai departe apare.
Dacă două elemente sunt poziționate astfel încât ambele ocupă o zonă comună de spațiu bidimensional, elementul cu un index mai mare z va observa sau va ocoli elementul cu indexul z inferior în zonele în care aceștia împart spațiul.
Presupun că cele de mai sus sunt destul de ușor de înțeles și, cel mai probabil, se comportă exact așa cum vă așteptați. Cu toate acestea, există unele întrebări fără răspuns agățat în jurul valorii.
Pentru a răspunde la aceste întrebări, trebuie să înțelegem mai mult despre funcționarea z-indexului, în special ideea de stivuire a contextelor, niveluri de stivuire și comenzi de stivuire.
Stabilirea contextelor de stivuire și a nivelelor de stivuire poate fi puțin dificil de conceptualizat, așa că pentru un moment, imaginați un tabel cu o grămadă de elemente așezate pe partea de sus a acestuia. Tabelul reprezintă un context de stivuire. Dacă există al doilea tabel lângă primul, acesta reprezintă un alt context de stivuire.
Acum imaginați-vă pe prima masă că există patru blocuri mici, toate așezate direct pe masă. Pe partea de sus a acestor patru blocuri este o farfurie de sticlă și pe partea de sus a plăcii de sticlă este un castron de fructe. Blocurile, placa de sticlă și castronul de fructe reprezintă fiecare un nivel de stivuire diferit în cadrul contextului de stivuire care este tabelul.
Un singur context de stivuire implicit este creat pentru fiecare pagină web. Rădăcina acestui context (tabelul) este html element. Tot ceea ce se află în interiorul etichetei html sta la un nivel de stivuire în cadrul acestui context de stivuire implicit (obiecte așezate pe masă).
Atunci când atribuiți o valoare din indexul z, altul decât auto, unui element, creați un nou context de stivuire cu nivele noi de stivuire care sunt independente de alte contexte de stivuire și niveluri de stivuire pe pagină. Aduceți o altă masă în cameră pentru a putea sta pe obiecte.
Cel mai simplu mod de a înțelege ordinea de stivuire este cu un exemplu simplu, atât de simplu încât nici măcar nu vom lua în considerare elemente poziționate pentru un moment.
Gândiți-vă la o pagină web foarte simplă. Altele decât cele implicite Ce așteptați să vedeți când încărcați pagina? Sperăm că nu v-ați făcut mult timp să imaginați un ecran albastru, cu excepția unui bloc de culoare roșie care are dimensiunile pe care le-ați stabilit pentru lățimea și înălțimea divului. Blocul roșu este, probabil, în partea stângă sus a paginii, dacă nu lăsați imaginația să ruleze sălbatic și să-i dați mai multă css pentru ao afișa în altă parte. S-ar putea să vă gândiți "deci ce, a fost destul de evident", dar ceea ce s-ar putea să nu fie atât de evident este de ce vedeți un bloc roșu pe fundalul albastru. De ce vedeți div deasupra elementului html? Motivul se datorează faptului că ambele respectă regulile comenzilor de stivuire. În cazul acestui exemplu simplu, regulile spun că blocurile descendente din fluxul normal (div) stau la un nivel mai înalt decât fundalul și marginile elementului rădăcină (elementul html). Vedeți divul de sus pentru că este la un nivel mai înalt de stivuire. În timp ce exemplul de mai sus conține numai un stack de două niveluri, există șapte niveluri posibile pe fiecare context de stivuire, care sunt enumerate mai jos. Aceste șapte niveluri formează regulile pentru ordinea de stivuire. Un element pe nivelul șapte va fi afișat deasupra (mai aproape de vizualizator) decât de elemente pe nivele de la unu la șase. Un element pe nivelul cinci se afișează deasupra unui element la nivelul doi. Un element asupra ... și tu ai ideea. Prima dată când am întâlnit regulile de ordonare de stivuire de mai sus, câteva lucruri mi-au stat în evidență. Dacă vă uitați doar la nivelurile doi, șase și șapte (cele unde se menționează indexul z), se potrivește cu ceea ce probabil presupuiți despre z-index. Indexul z pozitiv este la un nivel mai mare decât 0 z-index, care este la un nivel mai mare decât indexul z-negativ. Probabil că, probabil, majoritatea dintre noi nu mai gândim la toate aceste straturi de stivuire. Înainte de aceste reguli aș fi presupus că orice altceva era echivalent cu un z-index de 0. În mod clar că nu este așa. De fapt, majoritatea se află la un nivel sub nivelul z-index = 0. De asemenea, este interesant faptul că elementele non-poziționate sunt situate la patru nivele diferite de stivuire. Are sens când te gândești la asta. Dacă toate elementele non-poziționate au fost la același nivel de stivuire, nu am vedea textul (caseta inline) deasupra unei div (caseta de nivel bloc). De câteva ori am menționat crearea de contexte de stivuire noi. Când atribuiți o valoare a unui index z, altul decât Să ne gândim din nou la tabele ca contexte de stivuire. Înainte aveam o masă, iar pe masă erau patru blocuri, o farfurie de sticlă și un castron de fructe. Imaginați-vă că cel de-al doilea tabel pe care l-am introdus are de asemenea patru blocuri de aceeași dimensiune și o placă de sticlă deasupra, dar nici un bol de fructe. Ați aștepta ca vasul de fructe de la masa 1 să fie cel mai înalt element din cameră. Se află la cel mai înalt nivel (are cel mai mare z-index). Ce s-ar întâmpla dacă am fi mutat masa una și totul deasupra ei în subsol? Acest vas de fructe ar fi acum mai mic decât totul de pe tabelul doi, pentru că tabelul unul însuși a fost mutat la un nivel sub masa a doua. Același lucru se întâmplă și cu elemente poziționate pe o pagină web. Luați în considerare marcarea și stilul de mai jos. Voi HTML: CSS: Chiar dacă div.two are z-indexul mai mare (100), el se situează de fapt sub div.four (z-index = 50) pe pagină. Puteți vedea rezultatul codului de mai sus în imaginea de mai jos. Granițele negre și galbene prezintă diferitele contexte de stivuire în care se află fiecare element. Deoarece div.two este conținut în div.one, indexul său z este relativ la Ceea ce am făcut este mutat Dacă ești ca mine, probabil că te-am oprit o dată sau de două ori când lucrezi cu z-index. Sperăm că aceste exemple ajută la clarificarea motivului pentru care un element cu un z-index mai mare uneori se termină afișând în spatele unui alt element cu un z-index inferior. Când întâlniți prima dată, proprietatea z-index pare a fi o proprietate foarte simplă de înțeles. Valorile reprezintă o locație pe o axă în interiorul și în afara ecranului, și asta este tot. O privire mai adâncă la indexul z indică faptul că în spatele scenei se petrec ceva mai mult. Există contexte de stivuire, niveluri de stivuire și reguli pentru a determina ce element se afișează mai sus sau mai jos în ordinea de stivuire. Elementele poziționate pot crea noi contexte de stivuire, iar nivelurile întregi de stivuire se vor afișa deasupra sau sub toate nivelele dintr-un alt context de stivuire., , , etc veți găsi pe fiecare pagină web există un singur
Cele șapte niveluri dintr-un context de stivuire
Punând totul împreună
auto la un element pe care îl creați un nou context de stivuire, independent de alte contexte de stivuire.div.two afișați deasupra sau de dedesubt div.four?div width: 200px; înălțime: 200px; padding: 20px; .one, .two, .three, .four position: absolute; .one background: # f00; schiță: 5px solid # 000; top: 100px; stânga: 200px; z-index: 10; . două background: # 0f0; schiță: 5px solid # 000; top: 50px; stânga: 75px; z-index: 100; .de trei background: # 0ff; schiță: 5px solid # 000; top: 125px; stânga: 25px; z-index: 150; .de fundal: # 00f; schiță: 5px solid # ff0; top: 200px; stânga: 350px; z-index: 50;
div.onestack. În fapt ceea ce avem cu adevărat este următorul:
div.one și tot ce conține mai jos div.four. Indiferent de valorile pe care le-am stabilit pe proprietatea z-index a elementelor din interior div.one acestea vor fi afișate întotdeauna mai jos div.four.
Concluzie
Citirea în continuare
Accentsconagua