z-indeks

CSS svojstvo z-indeksa definira redoslijed elemenata kada se preklapaju kada su pozicionirani. Odnosno, možete ga koristiti da odredite koji će element (sloj) biti na vrhu, a koji (i kojim redoslijedom) će biti ispod njega.

Ali to nije tako jednostavno. Ovo svojstvo je jedno od rijetkih u CSS-u koje obavlja dvije potpuno različite funkcije odjednom (kao što je pozicija):

1. Svojstvo z-index se koristi za raspoređivanje pozicioniranih elemenata.
2. Svaki element sa z-indeksom koji nije jednak automatskom kreiranju novi nivo poredak, u odnosu na koji se ono (uređenje) javlja za sve njegove potomke (naravno, potomci čiji z-indeks nije jednak auto već kreiraju svoj vlastiti nivo uređenja). Zbog toga se, na primjer, element s jednog nivoa naručivanja ne može „postaviti“ između dva elementa s drugog.
3. Root element kreira osnovni nivo reda, čak i ako nema specificiran z-indeks.

Pogledajmo ovaj primjer:

U ovom primjeru, za bilo koje vrijednosti z-indeksa, moći ćete zamijeniti samo DIV3 i DIV4. Ali sljedeće neće raditi:

1. Neće biti moguće staviti DIV3 i DIV4 pod DIV2, pošto su uključeni različitim nivoima naručivanje. DIV2 je na nivou kreiranom elementom DIV1, a DIV3 i DIV4 su na nivou koji kreira DIV2. Da bi bili na istom nivou, morate ukloniti z-indeks iz DIV2 ili ga postaviti na auto .
2. Neće raditi staviti DIV2 pod DIV1. Da bi to funkcioniralo, morate već postaviti auto na DIV1.
3. I tako dalje...

U različitim udžbenicima i referentnim knjigama koncept „nivoa narudžbe“ naziva se različito - lokalni pozicijski kontekst, lokalni kontekst steka itd. U službenoj CSS specifikaciji to je napisano kao “lokalni kontekst slaganja”. Ali po mom mišljenju, fraza „nivo naručivanja“ je bliža razumijevanju za većinu ljudi koji govore ruski, zbog čega sam i uveo ovu definiciju.

Vrsta nekretnine

Svrha: pozicioniranje.

Odnosi se na: elemente sa položajem koji nije statički.

Naslijeđeno: ne.

Vrijednosti

Vrijednost svojstva z-indeks je specificiranje redoslijeda elemenata na jedan od sljedećih načina.

• Broj- bilo koji pozitivan ili negativan cijeli broj koji specificira redoslijed elemenata unutar datog nivoa uređenja. Element s višom vrijednošću bit će postavljen iznad onih s nižom vrijednošću. Ako dva elementa imaju iste vrijednosti, onda će onaj ispod u HTML kodu biti na vrhu. Osim toga, element koji ima numeričku vrijednost (uključujući 0) kreira novi nivo reda za svoje pozicionirane potomke.
• auto- sa ovom vrijednošću, element u trenutnom nivou naručivanja ima isti z-indeks kao i njegov predak koji je kreirao ovaj nivo. Međutim, sam element ne stvara novi nivo uređenja za svoje potomke. Ako postoji nekoliko elemenata sa datom vrijednošću, onda će onaj koji se pojavljuje ispod u HTML kodu stranice biti na vrhu.
• naslijediti- nasljeđuje vrijednost z-indeksa od roditeljskog elementa.

Unos postotka: ne postoji.

Zadana vrijednost: auto.

Budući da unutar elementa koji kreira nivo narudžbine mogu biti ne samo pozicionirani elementi, već i neki drugi, pretraživači koriste određena pravila za njihovo postavljanje u slojeve unutar datog nivoa:

1. Prvi sloj sadrži pozadinu i okvir elementa koji je kreirao ovaj nivo uređenja.
2. Na vrhu, u drugom sloju, nalaze se elementi potomci koji imaju negativne vrijednosti z-indeksa, gdje se iznad nalazi element čija je vrijednost bliža nuli.
3. Sljedeći sloj su elementi potomci koji nisu ugrađeni (inline).
4. Četvrti sloj se sastoji od plutajućih elemenata (plovka) zajedno sa njihovim sadržajem.
5. Peti sloj su ugrađeni elementi potomci.
6. Šesti sloj sadrži elemente sa z-indeksom auto ili 0, pri čemu je element ispod u kodu viši.
7. Konačno, elementi sa pozitivnim vrijednostima z-indeksa nalaze se na samom vrhu, pri čemu je element sa višom vrijednošću viši.

Sintaksa

z-indeks: auto | broj | naslijediti

CSS primjer: Korištenje z-indexa

Rezultat.

CSS verzije

Pregledači

Internet Explorer 6.0 i 7.0 ne razumiju vrijednost nasljeđivanja. Takođe u ovim pretraživačima, novi nivoi naručivanja kreiraju svi pozicionirani elementi, a ne samo oni sa numeričkim vrednostima z-indeksa.

IE 6.0 uvijek pozicionira element na vrhu svih elemenata stranice, bez obzira na vrijednosti z-indeksa.

Firefox 2.0 slaže elemente s negativnim vrijednostima z-indeksa ispod pozadine i ivice elementa koji je kreirao taj nivo uređenja. Drugim riječima, obrće tačke 1 i 2 u pravilima slojevitosti.

Današnja lekcija, kao i jučerašnja, govoriće vam o pozicioniranju u CSS-u, kao io veoma zanimljivom svojstvu zvanom z-index.

Koristeći ovo svojstvo, možete postavljati blokove teksta (i ne samo tekst) jedan na drugi, dok istovremeno dobijate nešto poput 3D efekta.

Ova lekcija će biti vrlo korisna za početnike u web dizajnu, jer ćemo osim teoretskih informacija pogledati i praktični primjer.

Radi jasnoće pogledajte dvije slike ispod:

"Relativno pozicioniranje"

"Apsolutno pozicioniranje"

Kao što vidite, sa relativnim pozicioniranjem, blok sa tekstom se postavlja u odnosu na pasus sa tekstom. Kada je apsolutno - u odnosu na prozor pretraživača.

Rad ovog svojstva najlakše je objasniti slikom:

Element sa višom vrednošću biće postavljen iznad.

Sada pogledajmo pobliže naš demo.

Izrada 1. bloka

Sloj 1

#sloj1 (
background:#707070;
boja:#fff;
pozicija:relativna;
širina:800px;
visina:450px;
}

Koristeći stilove, ovom bloku dajemo relativno pozicioniranje. Zahvaljujući tome, možemo postaviti dodatne blokove unutra.

Kreiranje 2. bloka

Po analogiji sa 1. blokom, kreiramo blok. Ovaj blok se razlikuje samo po svom identifikatoru (id="layer2").

Sloj 2

Lorem Ipsum je jednostavno lažni tekst za štampanje i montažu
industrija. Lorem Ipsum je bio standardni lažni tekst u industriji
još od 1500-ih, kada je nepoznati štampar uzeo galiju tipa
i skrembala da napravi knjigu primeraka tipa. Nije preživjelo
samo pet vekova, ali i skok u elektronsko kucanje,
ostajući suštinski nepromenjeni. Populariziran je 1960-ih godina
s izdavanjem listova Letraseta koji sadrže odlomke Lorem Ipsum,
a nedavno i sa softverom za desktop izdavaštvo kao što je Aldus
PageMaker uključujući verzije Lorem Ipsuma.

#layer2 (
background:#f9ad81;
boja:#fff;
pozicija:apsolutna;
top:40px;
lijevo:50px;
širina:400px;
visina:400px;
z-indeks:1;
}

Drugom bloku dajemo apsolutno pozicioniranje. Sada će sigurno biti unutar prvog i neće nigdje otići. Dodatno, definiramo atribut z-indeks (=1). To znači da će blok br. 2 biti smješten iznad prvog.

Izrada 3. bloka

Sloj 3

Lorem Ipsum je jednostavno lažni tekst za štampanje i montažu
industrija. Lorem Ipsum je bio standardni lažni tekst u industriji
još od 1500-ih, kada je nepoznati štampar uzeo galiju tipa
i skrembala da napravi knjigu primeraka tipa. Nije preživjelo
samo pet vekova, ali i skok u elektronsko kucanje,
ostajući suštinski nepromenjeni. Populariziran je 1960-ih godina
s izdavanjem listova Letraseta koji sadrže odlomke Lorem Ipsum,
a nedavno i sa softverom za desktop izdavaštvo kao što je Aldus
PageMaker uključujući verzije Lorem Ipsuma.

#layer3 (
background:#6dcff6;
boja:#fff;
pozicija:apsolutna;
top:80px;
lijevo:100px;
širina:600px;
visina:200px;
z-indeks:2;
}

U ovom bloku z-indeks = 2.

Možete pokušati zamijeniti blok indekse i vidjeti rezultat.

Zapamtite da će element sa nižim z-indeksom uvijek biti ispod elementa s višim. To jest, bloku br. 1 možete dati indeks = 999, a bloku br. 2 - 1000. Rezultat će biti isti.

To je sve za danas! Hvala na pažnji!

Kratke informacije

CSS verzije

CSS 1	CSS 2	CSS 2.1	CSS 3

Opis

Bilo koji pozicionirani elementi na web stranici mogu se naslagati jedan na drugi u određenom redoslijedu, čime se simulira treća dimenzija okomita na ekran. Svaki element može biti ispod ili iznad drugih objekata na web stranici, njihov položaj duž z-ose kontrolira z-indeks. Ovo svojstvo radi samo za elemente čija je vrijednost pozicije apsolutna, fiksna ili relativna.

Sintaksa

z-indeks: broj | auto | naslijediti

Vrijednosti

Kao vrijednosti se koriste cijeli brojevi (pozitivni, negativni i nula). Što je veća vrijednost, to je veći element u poređenju sa onim elementima koji imaju nižu vrijednost. Ako je vrijednost z-indeksa jednaka, element u prvom planu je onaj koji je dolje opisan u HTML kodu. Iako specifikacija dozvoljava korištenje negativnih vrijednosti z-indeksa, takvi elementi se ne prikazuju u Firefox pretraživač do verzije 2.0 uključujući.

Osim numeričke vrijednosti koristi se auto - redoslijed elemenata u ovom slučaju se gradi automatski na osnovu njihove pozicije u HTML kodu i njihove pripadnosti nadređenom, budući da podređeni elementi imaju isti broj kao i njihov roditeljski element. Vrijednost nasljeđivanja označava da je naslijeđena od roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

Sloj 1 na vrhu

Sloj 1

Sloj 2

Sloj 4 na vrhu

Sloj 3

Sloj 4

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Primjena svojstva z-indeksa

Objektni model

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

Pregledači

Lista kreirana pomoću oznake

, V Internet pretraživač Explorer 6 se uvijek pojavljuje na vrhu drugih elemenata, bez obzira na vrijednost z-indeksa.

Verzije Internet Explorera do i uključujući 7.0 ne podržavaju naslijeđenu vrijednost i tumače auto kao 0.

U verzijama pretraživača Firefox do i uključujući 2.0, negativna vrijednost z-indeksa pozicionira element ispod pozadine web stranice i njenog sadržaja.

Problem sa z-indeksom je što mnogi ljudi jednostavno ne razumiju kako on funkcionira.
Sve dolje opisano je u W3C specifikaciji. Nažalost, ne čitaju ga svi.

Opis problema:

Ispod je HTML kod sa osnovnim CSS dizajnom.

zadatak: pobrinite se da je crvena iza plave i zelene, bez kršenja bilo kojeg od sljedećih pravila:

• Ne možete promijeniti HTML oznake
• Ne možete mijenjati/dodati z-indeks elementima
• Ne možete mijenjati/dodati pozicioniranje elementima

Rješenje:

Hmm, tu nešto nije u redu. Kakve veze ima transparentnost s tim? Kako to može utjecati na redoslijed preklapajućih elemenata? Da li mislite isto? Dobrodošli u klub!
Nadam se da će u drugom dijelu članka sve doći na svoje mjesto.

Redoslijed preklapanja elemenata:

Bilo koji element u HTML dokument može biti u prvom planu ili u pozadini. Svi to znaju. Pravila koja definiraju ovaj redoslijed jasno su opisana u specifikaciji, ali, kao što sam već rekao, ne razumiju ih svi u potpunosti.

Ako z-indeks i svojstva pozicioniranja nisu eksplicitno postavljeni, sve je jednostavno: redoslijed slaganja jednak je redoslijedu elemenata u HTML-u. (Zapravo je malo kompliciranije od toga, ali sve dok ne koristite negativne vrijednosti paddinga za preklapanje inline elemenata, nećete naići na rubne slučajeve)

Ako eksplicitno navedete pozicioniranje za elemente (i njihovu djecu), onda će takvi elementi preklapati elemente bez eksplicitnog svojstva pozicioniranja. (Kada kažem „eksplicitno navedite pozicioniranje“, mislim na bilo koju vrijednost osim statičke, na primjer: apsolutnu ili relativnu).

I konačno, slučaj u kojem je zadan z-indeks. Za početak, prirodno je pretpostaviti da će elementi sa velikim z-indeksom biti iznad elemenata sa manjim z-indeksom, a bilo koji element sa skupom z-indeksa će biti iznad elementa bez skupa z-indeksa, ali ovo nije slučaj. Prvo, z-indeks se uzima u obzir samo na eksplicitno pozicioniranim elementima. Ako pokušate postaviti z-indeks na nepozicionirani element, ništa se neće dogoditi. Drugo, vrijednosti z-indeksa mogu stvoriti kontekste preklapanja. Hmm, stvari su postale mnogo komplikovanije, zar ne?

Preklapanje konteksta

Svaki kontekst preklapanja ima svoj vlastiti osnovni element u HTML strukturi. U trenutku kada se na elementu formira novi kontekst, svi podređeni elementi također spadaju u ovaj kontekst i zauzimaju svoje mjesto u redoslijedu preklapanja. Ako je element pozicioniran na samom dnu jednog konteksta preklapanja, ne postoji način da se u paklu prikaže iznad drugog elementa u susednom kontekstu preklapanja više u hijerarhiji, čak i sa z-indeksom postavljenim na milion.

Novi kontekst se može formirati u sljedećim slučajevima:

• Ako je element osnovni element dokumenta (element)
  Ako element nije statički pozicioniran i njegova vrijednost z-indeksa nije auto
  Ako element ima neprozirnost manju od 1

Problem sa z-indeksom je što mnogi ljudi jednostavno ne razumiju kako on funkcionira.
Sve dolje opisano je u W3C specifikaciji. Nažalost, ne čitaju ga svi.

Opis problema:

Ispod je HTML kod sa osnovnim CSS dizajnom.

zadatak: pobrinite se da je crvena iza plave i zelene, bez kršenja bilo kojeg od sljedećih pravila:

• Ne možete promijeniti HTML oznake
• Ne možete mijenjati/dodati z-indeks elementima
• Ne možete mijenjati/dodati pozicioniranje elementima

Rješenje:

Hmm, tu nešto nije u redu. Kakve veze ima transparentnost s tim? Kako to može utjecati na redoslijed preklapajućih elemenata? Da li mislite isto? Dobrodošli u klub!
Nadam se da će u drugom dijelu članka sve doći na svoje mjesto.

Redoslijed preklapanja elemenata:

Bilo koji element u HTML dokumentu može biti u prednjem planu ili u pozadini. Svi to znaju. Pravila koja definiraju ovaj redoslijed jasno su opisana u specifikaciji, ali, kao što sam već rekao, ne razumiju ih svi u potpunosti.

Ako z-indeks i svojstva pozicioniranja nisu eksplicitno postavljeni, sve je jednostavno: redoslijed slaganja jednak je redoslijedu elemenata u HTML-u. (Zapravo je malo kompliciranije od toga, ali sve dok ne koristite negativne vrijednosti paddinga za preklapanje inline elemenata, nećete naići na rubne slučajeve)

Ako eksplicitno navedete pozicioniranje za elemente (i njihovu djecu), onda će takvi elementi preklapati elemente bez eksplicitnog svojstva pozicioniranja. (Kada kažem „eksplicitno navedite pozicioniranje“, mislim na bilo koju vrijednost osim statičke, na primjer: apsolutnu ili relativnu).

I konačno, slučaj u kojem je zadan z-indeks. Za početak, prirodno je pretpostaviti da će elementi sa velikim z-indeksom biti iznad elemenata sa manjim z-indeksom, a bilo koji element sa skupom z-indeksa će biti iznad elementa bez skupa z-indeksa, ali ovo nije slučaj. Prvo, z-indeks se uzima u obzir samo na eksplicitno pozicioniranim elementima. Ako pokušate postaviti z-indeks na nepozicionirani element, ništa se neće dogoditi. Drugo, vrijednosti z-indeksa mogu stvoriti kontekste preklapanja. Hmm, stvari su postale mnogo komplikovanije, zar ne?

Preklapanje konteksta

Svaki kontekst preklapanja ima svoj vlastiti osnovni element u HTML strukturi. U trenutku kada se na elementu formira novi kontekst, svi podređeni elementi također spadaju u ovaj kontekst i zauzimaju svoje mjesto u redoslijedu preklapanja. Ako je element pozicioniran na samom dnu jednog konteksta preklapanja, ne postoji način da se u paklu prikaže iznad drugog elementa u susednom kontekstu preklapanja više u hijerarhiji, čak i sa z-indeksom postavljenim na milion.

Novi kontekst se može formirati u sljedećim slučajevima:

• Ako je element osnovni element dokumenta (element)
  Ako element nije statički pozicioniran i njegova vrijednost z-indeksa nije auto
  Ako element ima neprozirnost manju od 1