Css director

Proprietatea CSS a indexului z determină ordinea elementelor atunci când ele sunt suprapuse pe ele în timpul poziționării. Asta este, puteți să-l utilizați pentru a specifica care element (strat) va fi pe partea de sus și care (și în ce ordine) de dedesubt.

Elemente cu valori diferite ale proprietăților z-index.

Dar nu este așa de simplu. Această proprietate este una dintre puținele din CSS care efectuează două funcții complet diferite (cum ar fi, de exemplu, poziția):

Proprietatea z-index este utilizată pentru a organiza elementele poziționate.
Fiecare element cu z-index nu este egal cu auto creează un nou nivel de ordonare, în privința căruia (ordonarea) are loc pentru toți descendenții săi (firesc, copiii ai căror indici z nu sunt egali cu auto crează propriul nivel de ordonare). De aceea, de exemplu, un element dintr-un nivel de ordonare nu poate fi "pus" între două elemente de la altul.
Elementul rădăcină creează un nivel rădăcină de ordonare, chiar dacă nu are z-index.

Să ne uităm la acest exemplu:

În acest exemplu, pentru orice valori numerice z-index, veți putea să schimbați numai DIV3 și DIV4. Dar nu se întâmplă următoarele:

Nu este posibil să plasezi DIV3 și DIV4 sub DIV2, deoarece acestea se află la diferite nivele de comandă. DIV2 la nivelul creat de elementul DIV1 și DIV3 și DIV4 la nivelul creat de DIV2. Că au fost la același nivel, trebuie să eliminați indexul z din DIV2 sau să-l setați automat.
Nu se va putea pune DIV2 sub DIV1. Pentru ao obține trebuie să setați auto deja în DIV1.
Și așa mai departe.

În diferite manuale și cărți de referință, noțiunea de "nivel de comandă" se numește diferit - contextul poziției locale, contextul local al stivei etc. În caietul de sarcini oficial CSS, este scris astfel: "context local de stivuire". Dar, în opinia mea, expresia "nivelul de ordonare" este mai aproape de înțelegerea pentru majoritatea oamenilor de limbă rusă, așa că am introdus această definiție.

Tipul de proprietate

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

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

Un număr este orice număr întreg sau număr negativ care specifică ordinea elementelor dintr-un anumit nivel de comandă. Un element cu o valoare mai mare va fi situat pe partea superioară a celor cu mai puțină valoare. Dacă două elemente au aceleași valori, atunci cea de sus va fi cea care este mai mică în codul HTML. În plus, un element care are o valoare numerică (inclusiv 0) creează un nou nivel de ordonare a descendenților poziționați.
auto - la această valoare la un element din nivelul actual de comandă a aceluiași z-index. ca și strămoșul său, care a creat acest nivel. În acest caz, elementul în sine nu creează un nou nivel de ordonare a descendenților săi. Dacă există mai multe elemente cu această valoare, atunci va fi una care este mai mică în codul HTML al paginii.
inherit - moștenește valoarea z-indexului de la elementul părinte.

Dobânda: nu există.

Valoarea implicită este auto.

Deoarece pot exista nu numai elemente poziționate, ci și alte elemente din interiorul elementului care creează nivelul de ordonare, browserele folosesc anumite reguli pentru stratificare în cadrul unui anumit nivel:

Primul strat este așezat fundalul și cadrul elementului, care a creat acest nivel de comandă.
Pe partea de sus, al doilea strat, elementele descendente având valori negative ale indexului z sunt stivuite. unde un element cu o valoare mai aproape de zero apare mai sus.
Următorul strat este elemente descendente care nu sunt inline.
Cel de-al patrulea strat este elemente plutitoare (float) împreună cu conținutul său.
Cel de-al cincilea strat este elementul descendent încorporat.
Cel de-al șaselea strat este stivuit cu elementele cu index auto z sau 0, unde elementul de mai jos apare în codul de mai sus.
În cele din urmă, la partea de sus sunt elemente cu valori pozitive ale indexului z. unde un element cu o valoare mai mare apare mai sus.

z-index: auto | numărul | moșteni

Exemplu CSS: folosind z-index

Rezultatul. Folosind z-indexul proprietății CSS.

Internet Explorer 6.0 și 7.0 nu înțeleg semnificația moștenirii. Tot în aceste browsere, nivelele de comandă noi creează, în general, toate elementele poziționate și nu doar valorile numerice z-index.

IE 6.0 are întotdeauna un element