z-index

Proprietatea z-index CSS definește ordinea elementelor atunci când acestea se suprapun între ele când sunt poziționate. Adică, îl puteți folosi pentru a specifica ce element (layer) va fi deasupra și care (și în ce ordine) va fi sub el.

Dar nu este atât de simplu. Această proprietate este una dintre puținele din CSS care îndeplinește două funcții complet diferite simultan (cum ar fi poziția):

1. Proprietatea z-index este folosită pentru a aranja elementele poziționate.
2. Fiecare element cu un index z care nu este egal cu auto creează nou nivel ordonarea, în raport cu care aceasta (ordonarea) apare pentru toți descendenții săi (în mod firesc, descendenții al căror indice z nu este egal cu auto își creează deja propriul nivel de ordonare). Acesta este motivul pentru care, de exemplu, un element de la un nivel de ordonare nu poate fi „plasat” între două elemente de la altul.
3. Element rădăcină creează un nivel de ordonare rădăcină, chiar dacă nu are un index z specificat.

Să ne uităm la acest exemplu:

În acest exemplu, pentru orice valoare z-index, veți putea schimba doar DIV3 și DIV4. Dar următoarele nu vor funcționa:

1. Nu va fi posibil să puneți DIV3 și DIV4 sub DIV2, deoarece sunt activate diferite niveluri ordonând. DIV2 este la nivelul creat de elementul DIV1, iar DIV3 și DIV4 sunt la nivelul creat de DIV2. Pentru ca acestea să fie la același nivel, trebuie să eliminați indexul z din DIV2 sau să îl setați pe auto .
2. Nu va funcționa să puneți DIV2 sub DIV1. Pentru ca acesta să funcționeze, trebuie să setați automat deja la DIV1.
3. Și așa mai departe...

În diferite manuale și cărți de referință, conceptul de „nivel de comandă” este numit diferit - context pozițional local, context local de stivă etc. În specificația oficială CSS este scris ca „context local de stivuire”. Dar, în opinia mea, expresia „nivel de ordonare” este mai aproape de înțelegere pentru majoritatea oamenilor vorbitori de limbă rusă, motiv pentru care am introdus această definiție.

Tip de proprietate

Scop: pozitionare.

Se aplică: elementelor cu altă poziție decât statică.

Moștenit: nu.

Valori

Valoarea proprietății z-index este de a specifica ordinea elementelor într-unul din următoarele moduri.

• Număr- orice număr întreg pozitiv sau negativ care specifică ordinea elementelor într-un anumit nivel de ordonare. Un element cu o valoare mai mare va fi plasat deasupra celor cu o valoare mai mică. Dacă două elemente au aceleași valori, atunci cel de mai jos în codul HTML va fi în partea de sus. În plus, un element care are o valoare numerică (inclusiv 0) creează un nou nivel de ordonare pentru copiii săi poziționați.
• auto- cu această valoare, elementul din nivelul de ordonare curent are același z-index ca strămoșul său care a creat acest nivel. Cu toate acestea, elementul în sine nu creează un nou nivel de ordonare pentru descendenții săi. Dacă există mai multe elemente cu o valoare dată, atunci cel care apare mai jos în codul HTML al paginii va fi deasupra.
• moşteni- moștenește valoarea z-index din elementul părinte.

Intrare procentuală: nu există.

Valoare implicită: auto.

Deoarece în interiorul elementului care creează nivelul de ordonare pot exista nu numai elemente poziționate, ci și altele, browserele folosesc anumite reguli pentru stratificarea acestora într-un anumit nivel:

1. Primul strat conține fundalul și cadrul elementului care a creat acest nivel de ordonare.
2. Deasupra, în al doilea strat, sunt elemente descendente care au valori negative ale indicelui z, unde elementul cu o valoare mai apropiată de zero este situat deasupra.
3. Următorul strat sunt elemente descendente care nu sunt încorporate (inline).
4. Al patrulea strat este format din elemente plutitoare (float) împreună cu conținutul acestora.
5. Al cincilea strat este încorporat în elemente descendente.
6. Al șaselea strat conține elemente cu z-index auto sau 0, unde elementul de mai jos din cod este mai mare.
7. În cele din urmă, elementele cu valori pozitive ale indicelui z sunt foarte în vârf, elementul cu valoarea mai mare fiind mai mare.

Sintaxă

z-index: auto | număr | moşteni

Exemplu CSS: Utilizarea z-index

Rezultat.

versiuni CSS

Browsere

Internet Explorer 6.0 și 7.0 nu înțeleg valoarea de moștenire. Tot în aceste browsere sunt create noi niveluri de ordonare de către toate elementele poziționate, nu doar cele cu valori numerice z-index.

IE 6.0 poziționează întotdeauna elementul deasupra tuturor elementelor paginii, indiferent de valorile indexului z.

Firefox 2.0 stivuiește elemente cu valori negative z-index sub fundalul și chenarul elementului care a creat acel nivel de aranjament. Cu alte cuvinte, inversează punctele 1 și 2 din regulile de stratificare.

Lecția de astăzi, ca și cea de ieri, vă va spune despre poziționarea în CSS, precum și despre o proprietate foarte interesantă numită z-index.

Folosind această proprietate, puteți plasa blocuri de text (și nu numai text) unul peste altul, obținând în același timp ceva ca un efect 3D.

Această lecție va fi foarte utilă pentru începătorii în design web, deoarece pe lângă informațiile teoretice, vom analiza și un exemplu practic.

Pentru claritate, priviți cele două imagini de mai jos:

„Poziționare relativă”

„Poziționare absolută”

După cum puteți vedea, cu poziționare relativă, blocul cu text este plasat în raport cu paragraful cu text. Când este absolut - în raport cu fereastra browserului.

Funcționarea acestei proprietăți este cel mai ușor de explicat cu o imagine:

Elementul cu o valoare mai mare va fi plasat deasupra.

Acum să aruncăm o privire mai atentă la demonstrația noastră.

Crearea blocului 1

Stratul 1

#layer1 (
fundal:#707070;
culoare:#fff;
poziție:relativă;
lățime: 800px;
înălțime: 450px;
}

Folosind stiluri, dăm acestui bloc poziție relativă. Datorită acestui lucru, putem plasa blocuri suplimentare în interior.

Crearea celui de-al 2-lea bloc

Prin analogie cu primul bloc, creăm un bloc. Acest bloc diferă doar prin identificatorul său (id="layer2").

Stratul 2

Lorem Ipsum este pur și simplu text fals al tipăririi și al tipăririi
industrie. Lorem Ipsum a fost textul fals standard al industriei
încă din anii 1500, când un tipar necunoscut a luat o galeră de tipărire
și l-am amestecat pentru a face o carte tip specimen. Nu a supraviețuit
doar cinci secole, dar și saltul în compunerea electronică,
rămânând practic neschimbat. A fost popularizat în anii 1960
odată cu lansarea foilor Letraset care conțin pasaje Lorem Ipsum,
și, mai recent, cu software de publicare desktop precum Aldus
PageMaker, inclusiv versiuni de Lorem Ipsum.

#layer2 (
fundal:#f9ad81;
culoare:#fff;
poziție: absolut;
sus:40px;
stânga: 50px;
lățime: 400px;
înălțime: 400px;
indicele z: 1;
}

Oferim celui de-al doilea bloc poziționare absolută. Acum va fi cu siguranță în primul și nu va merge nicăieri. În plus, definim atributul z-index (=1). Aceasta înseamnă că blocul nr. 2 va fi situat deasupra primului.

Crearea blocului 3

Stratul 3

Lorem Ipsum este pur și simplu text fals al tipăririi și al tipăririi
industrie. Lorem Ipsum a fost textul fals standard al industriei
încă din anii 1500, când un tipar necunoscut a luat o galeră de tipărire
și l-am amestecat pentru a face o carte tip specimen. Nu a supraviețuit
doar cinci secole, dar și saltul în compunerea electronică,
rămânând practic neschimbat. A fost popularizat în anii 1960
odată cu lansarea foilor Letraset care conțin pasaje Lorem Ipsum,
și, mai recent, cu software de publicare desktop precum Aldus
PageMaker, inclusiv versiuni de Lorem Ipsum.

#layer3 (
fundal:#6dcff6;
culoare:#fff;
poziție: absolut;
sus: 80px;
stânga: 100px;
latime: 600px;
înălțime: 200px;
indicele z:2;
}

În acest bloc z-index = 2.

Puteți încerca să schimbați indici de bloc și să vedeți rezultatul.

Amintiți-vă că un element cu un indice z mai mic va fi întotdeauna sub un element cu unul mai mare. Adică, puteți da blocului nr. 1 un indice = 999 și blocului nr. 2 - 1000. Rezultatul va fi același.

Asta e tot pentru azi! Vă mulțumim pentru atenție!

Informații scurte

versiuni CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Descriere

Orice elemente poziționate pe o pagină web pot fi stivuite unul peste altul într-o anumită ordine, simulând astfel o a treia dimensiune perpendiculară pe ecran. Fiecare element poate fi fie sub, fie deasupra altor obiecte de pe pagina web, plasarea lor de-a lungul axei z este controlată de z-index . Această proprietate funcționează numai pentru elementele a căror valoare de poziție este absolută, fixă ​​sau relativă.

Sintaxă

z-index: număr | auto | moşteni

Valori

Numerele întregi (pozitive, negative și zero) sunt folosite ca valori. Cu cât valoarea este mai mare, cu atât elementul este mai mare în comparație cu acele elemente care au o valoare mai mică. Dacă valoarea z-index este egală, elementul din prim-plan este cel descris mai jos în codul HTML. Deși specificația permite utilizarea valorilor negative ale indicelui z, astfel de elemente nu sunt afișate în browser Firefox până la versiunea 2.0 inclusiv.

Cu excepţia valori numerice se folosește auto - ordinea elementelor în acest caz este construită automat pe baza poziției lor în codul HTML și a apartenenței lor la părinte, deoarece elementele copil au același număr ca și elementul părinte. Valoarea de moștenire indică faptul că este moștenită de la părinte.

HTML5 CSS2.1 IE Cr Op Sa Fx

Stratul 1 deasupra

Stratul 1

Stratul 2

Stratul 4 deasupra

Stratul 3

Stratul 4

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Aplicând proprietatea z-index

Model obiect

document.getElementById("elementID").style.zIndex

Browsere

Lista creată folosind eticheta

, V browser de internet Explorer 6 apare întotdeauna deasupra altor elemente, indiferent de valoarea indexului z.

Versiunile de Internet Explorer până la 7.0 inclusiv nu acceptă valoarea de moștenire și interpretează automat ca 0.

În versiunile browserului Firefox până la 2.0 inclusiv, o valoare z-index negativă poziționează elementul sub fundalul paginii web și al conținutului acesteia.

Problema cu indexul z este că mulți oameni pur și simplu nu înțeleg cum funcționează.
Tot ceea ce este descris mai jos este în specificația W3C. Din păcate, nu toată lumea o citește.

Descrierea problemei:

Mai jos este codul HTML cu design CSS de bază.

Sarcină: asigurați-vă că roșul este în spatele albastrului și al verdelui, fără a încălca niciuna dintre următoarele reguli:

• Nu puteți schimba marcajul HTML
• Nu puteți modifica/adăuga z-index la elemente
• Nu puteți modifica/adăuga poziționarea elementelor

Soluţie:

Hmm, ceva nu este în regulă aici. Ce legătură are transparența cu asta? Cum poate influența ordinea elementelor care se suprapun? Crezi la fel? Bun venit în club!
Sper că în a doua parte a articolului totul va fi la locul lor.

Ordinea elementelor de suprapunere:

Orice element din document HTML poate fi fie în prim-plan, fie în fundal. Toată lumea știe asta. Regulile care definesc această ordine sunt descrise clar în specificație, dar, așa cum am spus mai sus, nu toată lumea le înțelege pe deplin.

Dacă indexul z și proprietățile de poziționare nu sunt setate în mod explicit, totul este simplu: ordinea de stivuire este egală cu ordinea elementelor din HTML. (De fapt, este puțin mai complicat decât atât, dar atâta timp cât nu folosiți valori negative de umplutură pentru a suprapune elementele inline, nu veți întâlni cazuri de margine)

Dacă specificați în mod explicit poziționarea elementelor (și copiii lor), atunci astfel de elemente se vor suprapune elementelor fără o proprietate explicită de poziționare. (Când spun „specificați în mod explicit poziționarea”, mă refer la orice altă valoare decât statică, de exemplu: absolută sau relativă).

Și în sfârșit, cazul în care este dat indicele z. Pentru început, este firesc să presupunem că elementele cu un indice z mare vor fi deasupra elementelor cu un indice z mai mic, iar orice element cu un set de indice z va fi deasupra unui element fără un set de indice z, dar acest lucru nu este cazul. În primul rând, indicele z este luat în considerare doar pe elementele poziționate în mod explicit. Dacă încercați să setați indexul z pe un element nepoziționat, nu se va întâmpla nimic. În al doilea rând, valorile z-index pot crea contexte suprapuse. Hmm, lucrurile s-au complicat mult, nu-i așa?

Suprapunerea contextului

Fiecare context de suprapunere are propriul său element rădăcină în structura HTML. În momentul în care se formează un nou context pe un element, toate elementele copil intră și ele în acest context și își iau locul în ordinea de suprapunere. Dacă un element este poziționat în partea de jos a unui context de suprapunere, nu există nicio modalitate de a fi afișat deasupra altui element într-un context de suprapunere adiacent mai sus în ierarhie, chiar și cu un index z setat la un milion.

Un nou context se poate forma în următoarele cazuri:

• Dacă elementul este elementul rădăcină al documentului (elementului)
  Dacă elementul nu este poziționat static și valoarea lui z-index nu este automată
  Dacă elementul are opacitate mai mică de 1

Problema cu indexul z este că mulți oameni pur și simplu nu înțeleg cum funcționează.
Tot ceea ce este descris mai jos este în specificația W3C. Din păcate, nu toată lumea o citește.

Descrierea problemei:

Mai jos este codul HTML cu design CSS de bază.

Sarcină: asigurați-vă că roșul este în spatele albastrului și al verdelui, fără a încălca niciuna dintre următoarele reguli:

• Nu puteți schimba marcajul HTML
• Nu puteți modifica/adăuga z-index la elemente
• Nu puteți modifica/adăuga poziționarea elementelor

Soluţie:

Hmm, ceva nu este în regulă aici. Ce legătură are transparența cu asta? Cum poate influența ordinea elementelor care se suprapun? Crezi la fel? Bun venit în club!
Sper că în a doua parte a articolului totul va fi la locul lor.

Ordinea elementelor de suprapunere:

Orice element dintr-un document HTML poate fi fie în prim-plan, fie în fundal. Toată lumea știe asta. Regulile care definesc această ordine sunt descrise clar în specificație, dar, așa cum am spus mai sus, nu toată lumea le înțelege pe deplin.

Dacă indexul z și proprietățile de poziționare nu sunt setate în mod explicit, totul este simplu: ordinea de stivuire este egală cu ordinea elementelor din HTML. (De fapt, este puțin mai complicat decât atât, dar atâta timp cât nu folosiți valori negative de umplutură pentru a suprapune elementele inline, nu veți întâlni cazuri de margine)

Dacă specificați în mod explicit poziționarea elementelor (și copiii lor), atunci astfel de elemente se vor suprapune elementelor fără o proprietate explicită de poziționare. (Când spun „specificați în mod explicit poziționarea”, mă refer la orice altă valoare decât statică, de exemplu: absolută sau relativă).

Și în sfârșit, cazul în care este dat indicele z. Pentru început, este firesc să presupunem că elementele cu un indice z mare vor fi deasupra elementelor cu un indice z mai mic, iar orice element cu un set de indice z va fi deasupra unui element fără un set de indice z, dar acest lucru nu este cazul. În primul rând, indicele z este luat în considerare doar pe elementele poziționate în mod explicit. Dacă încercați să setați indexul z pe un element nepoziționat, nu se va întâmpla nimic. În al doilea rând, valorile z-index pot crea contexte suprapuse. Hmm, lucrurile s-au complicat mult, nu-i așa?

Suprapunerea contextului

Fiecare context de suprapunere are propriul său element rădăcină în structura HTML. În momentul în care se formează un nou context pe un element, toate elementele copil intră și ele în acest context și își iau locul în ordinea de suprapunere. Dacă un element este poziționat în partea de jos a unui context de suprapunere, nu există nicio modalitate de a fi afișat deasupra altui element într-un context de suprapunere adiacent mai sus în ierarhie, chiar și cu un index z setat la un milion.

Un nou context se poate forma în următoarele cazuri:

• Dacă elementul este elementul rădăcină al documentului (elementului)
  Dacă elementul nu este poziționat static și valoarea lui z-index nu este automată
  Dacă elementul are opacitate mai mică de 1