Većina CSS svojstava je lako razumljiva. Često, primjena bilo kojeg od njih na element za označavanje daje trenutne rezultate - samo trebate osvježiti stranicu i možete vidjeti učinak aplikacije. Međutim, postoje neka svojstva koja su složenija i koja će raditi samo pod određenim okolnostima.
Svojstvo z-indeks pripada drugoj grupi, što nesumnjivo izaziva više zabune od bilo koje druge. Ironično, međutim, sa potpunim razumijevanjem šta je z-indeks, vrlo je jednostavan za korištenje i često je efikasan način za prevazilaženje mnogih problema sa rasporedom.
U ovom članku ćemo pogledati šta je z-indeks, koji problemi postoje u njegovom razumijevanju, a također ćemo razmotriti neke primjere njegove upotrebe. Takođe ćemo razmotriti razliku u načinu na koji pretraživači to rade, posebno u prethodnim verzijama Internet Explorer-a i FireFox-a.
Dakle, koja je ovo imovina?
Svojstvo z-index određuje nivo položaja u steku, dubinu html elementa. "Nivo dubine" znači položaj elementa duž Z ose (upravno na X i Y osi ekrana). Što je veća vrijednost z-indeksa, to će element biti viši.
Prirodni raspored elemenata
Na stranici, normalno postavljanje elemenata (pod tim mislim duž Z ose) određuje nekoliko faktora. Ispod je lista ovih faktora, počevši od najnižih elemenata. Ova lista pretpostavlja da nijednom elementu nije eksplicitno dodijeljeno svojstvo z-indeksa.
- Pozadina i granice elementa koji definira kontekst steka.
- Elementi s negativnim kontekstom steka, u redoslijedu prikaza.
- Nepozicionirani (pozicija: statički), kao i bez skupa svojstava float (float: nema) blok elemenata (prikaz: blok), u redoslijedu prikaza.
- Nepozicionirani blokovi sa plutajućim svojstvima, u redoslijedu prikaza.
- Inline elementi, u redoslijedu prikaza.
- Elementi sa postavljenim svojstvom položaja, u redoslijedu prikaza.
Ispravna primjena svojstva z-indeksa može promijeniti prirodnu poziciju u steku.
Naravno, redoslijed elemenata u steku nije očigledan sve dok ne trebate prikazati elemente jedan iznad drugog. Stoga, da biste vidjeli normalan redoslijed elemenata, primjer ispod koristi negativne margine.
Ovi elementi imaju različite boje pozadine i ivica, a posljednja dva su pomaknuta zbog postavljanja negativnog svojstva margine. Na taj način možete vidjeti prirodan raspored elemenata, svaki sljedeći je „iznad“ prethodnog. Ovi elementi nemaju skup svojstava z-indeksa, a njihov redoslijed slaganja je prirodan.
Gdje bi mogli biti problemi?
Pogledajmo najpopularniji problem među programerima početnicima. Stvar je u tome da svojstvo z-index radi samo na elementima koji imaju svojstvo položaja postavljeno na apsolutnu, fiksnu ili relativnu.
Da bismo to demonstrirali, prikažimo ista tri elementa, ali sa svojstvom z-indeksa postavljenim da pokušamo promijeniti redoslijed duž Z ose.
Postavimo z-indeks sivog elementa na 9999, plavog elementa na 500, a braon elementa na 1. Logično je očekivati da se redoslijed promijeni. Ali ne u ovom slučaju, pošto je svojstvo pozicije statičko po defaultu.
Postavimo svojstvo pozicije na relativno i vidimo šta se dešava:
Ali sada imamo očekivani rezultat. Redoslijed elemenata je promijenjen, sivi element je iznad svega, a smeđi je na samom dnu.
Sintaksa
Svojstvo z-index utječe i na blok elemente i na inline elemente. Vrijednost može biti pozitivan ili negativan broj, ili je zadana vrijednost auto . Zadana vrijednost znači da je element na istom nivou kao i njegov roditelj.
Ispod je CSS za treći primjer, gdje je svojstvo z-index ispravno primijenjeno:
#grey_box ( širina: 200px; visina: 200px; granica: čvrsta 1px #ccc; pozadina: #ddd; pozicija: relativna; z-indeks: 9999; ) #blue_box ( širina: 200px; visina: 200px; granica: čvrsta 1px # 4a7497; pozadina: #8daac3; pozicija: relativna; z-indeks: 500; ) #gold_box (širina: 200px; visina: 200px; granica: čvrsta 1px #8b6125; pozadina: #ba945d; pozicija: relativna; z-indeks: 1 ; )
Još jednom, posebno za one koji su novi u CSS-u, svojstvo z-index neće raditi osim ako ne postavite svojstvo pozicije.
Koristi se u javascriptu
Možete utjecati na svojstvo z-index dinamički koristeći javaScript. Sintaksa je slična onoj većine CSS svojstava, koristeći kamel notaciju za zamjenu crtice u CSS svojstvima.
Var myElement = document.getElementById("gold_box"); myElement.style.position = "relativan"; myElement.style.zIndex = "9999";
Neispravna implementacija u IE i FireFox-u
U nekim slučajevima, u IE6, IE7 i FireFox 2, postoji netačna implementacija svojstva z-indeksa.
Odaberite element u IE6
U Internet Explorer-u 6, element select je kontrola prozora, iz tog razloga se uvijek prikazuje na vrhu svih elemenata, zanemarujući normalan redoslijed postavljanja, kao i svojstva pozicije i z-indeksa. Problem je prikazan na slici ispod:
Select element je prvi element u dokumentu, njegovo svojstvo z-indeksa je postavljeno na 1, a njegova pozicija je postavljena na relativnu. Div se prikazuje nakon odabira i njegov z-indeks je "9999". Na osnovu svega ovoga, div bi trebao biti smješten iznad select , kao što se to dešava u drugim pretraživačima:
Odaberite godinu - 2009 2010 2011
Ako ne gledate ovaj članak u IE6, vidjet ćete da je div pozicioniran iznad select .
Ova IE6 greška je veliki problem za padajuće menije kada treba da preklapaju selektovani element. Rješenje bi moglo biti korištenje JavaScripta da privremeno sakrijete birače, a zatim ih ponovo prikažete nakon što meni nestane. Drugo rješenje bi moglo biti korištenje iframe-a.
Pozicionirani roditelji u IE6/IE7
Internet Explorer verzije 6 i 7 ne resetuju ispravno kontekst steka u odnosu na najbliži pozicionirani roditelj. Da bismo demonstrirali ovu grešku, ponovo ćemo prikazati dva diva. Ali ovaj put ćemo prvi umotati u pozicionirani element.
Sivi element ima z-indeks 9999, plavi element ima z-indeks 1, oba elementa su pozicionirana. Stoga, ako se pravilno implementira, sivi element će se pojaviti na vrhu plavog.
Ako otvorite ovu stranicu u IE6 ili IE7, vidjet ćete da se plavi element preklapa sa sivim. Ovo se dešava zato što je sivi element umotan u drugi div čija je pozicija postavljena na relativnu.
Oba pretraživača "resetuju" kontekst steka na relativno pozicioniranim elementima, iako to ne bi trebalo. Sivi element ima veći z-indeks od plavog elementa, tako da bi trebao izgledati viši. Kod drugih pretraživača takvog problema nema.
Negativne vrijednosti u FireFoxu 2
U FireFox-u 2, elementi sa negativnim z-indeksom su ispod konteksta slaganja, umjesto da budu iznad pozadine i granica elementa koji formira kontekst slaganja. Primjer možete vidjeti na slici:
Ispod je html verzija
Kao što vidite, pozadina sivog elementa (koji čini kontekst steka) je ispod plave, a tekst (koji je inline element u sivom elementu) je iznad njega, prateći prirodna pravila rasporeda opisana gore.
Primjeri korištenja
Originalni članak daje mnogo primjera korištenja imovine. Iskreno, previše sam lijen da ovo prevedem, u osnovi je to screenshot, mali komentar i link. Ako ti zaista treba, onda piši, naći ću vremena za to.
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.
kratke informacije
Oznake
| Opis | Primjer | |
|---|---|---|
| <тип> | Označava tip vrijednosti. | <размер> |
| A && B | Vrijednosti se moraju ispisati navedenim redoslijedom. | <размер> && <цвет> |
| A | B | Označava da trebate odabrati samo jednu vrijednost od predloženih (A ili B). | normalno | small-caps |
| A || B | Svaka vrijednost se može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom. | širina || count |
| Grupne vrijednosti. | [ usev || križ ] | |
| * | Ponovite nula ili više puta. | [,<время>]* |
| + | Ponovite jedan ili više puta. | <число>+ |
| ? | Navedeni tip, riječ ili grupa su opcioni. | umetnuti? |
| (A, B) | Ponovite najmanje A, ali ne više od B puta. | <радиус>{1,4} |
| # | Ponovite jedan ili više puta odvojeno zarezima. | <время># |
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. Prihvatljivo je koristiti negativnu vrijednost.
Osim numeričkih vrijednosti, koristi se i 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.
Primjer
U ovom primjeru, kada zadržite pokazivač iznad karte, ona dolazi do prednje ivice, djelomično preklapajući ostale slike (slika 1).
Rice. 1. Promjena redoslijeda karata
Objektni model
Objekt.style.zIndex
Bilješka
Lista kreirana sa
Internet Explorer verzije do i uključujući 7.0 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.
Specifikacija
Svaka specifikacija prolazi kroz nekoliko faza odobrenja.
- Preporuka - specifikaciju je odobrio W3C i preporučuje se kao standard.
- Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice da implementira standard.
- Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se dostavlja Savjetodavnom vijeću W3C na konačno odobrenje.
- Radni nacrt – zrelija verzija nacrta o kojoj se raspravljalo i dopunjeno za pregled zajednice.
- Nacrt urednika ( Urednički nacrt) - nacrt standarda nakon izmjena koje su izvršili urednici projekta.
- Nacrt ( Nacrt specifikacije) - prva verzija standarda.
Kontrole svojstva z-indeksa red primjene pozicionirani elementi kada se međusobno preklapaju. Svojstvo prihvaća pozitivne i negativne vrijednosti cijelih brojeva.
U normalnom toku, statički elementi position: postavljaju se jedan za drugim redom kojim su definisani u html dokumentu. Podrazumevano je z-index: auto; .
Rice. 1. Pozicioniranje elemenata duž Z osi Svojstvo z-indeks specificira redoslijed elemenata duž ose Z. Normalno, elementi sa visokom vrijednošću indeksa preklapaju elemente s nižom vrijednošću i automatskom vrijednošću, stavljajući ih u prvi plan.
Rice. 2. Utjecaj svojstva z-indeksa na pozicionirane elemente Preklapanje konteksta
Ako z-indeks i svojstva položaja elemenata nisu eksplicitno postavljeni, kontekst preklapanja je redoslijed kojim se pojavljuju u izvornom kodu. Ako elementi nemaju specificiran z-indeks, pretraživač prikazuje elemente na stranici sljedećim redoslijedom:
Root element
Pozicionirani elementi redoslijedom kojim se pojavljuju u izvornom kodu. Posljednji će se nalaziti u prvom planu.
Rice. 3. Zadani redoslijed elemenata u 3D prostoru 
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Kao što se može vidjeti sa slike, element sa pozicijom: apsolutni; je u prvom planu, praćen tekstom, ispod njega su plutajući elementi sa float-om: lijevo; , nepozicionirani blok elementi se postavljaju u pozadinu (pošto su plutajući i pozicionirani elementi uklonjeni iz toka, nepozicionirani elementi na nivou bloka ih zanemaruju i postavljaju se jedan za drugim, u skladu sa oznakom, tako da element .
Svojstvo z-index kreira novi kontekst preklapanja. Omogućava vam da promijenite redoslijed slaganja pozicionirani elementi. Elementi će biti prikazani na stranici sljedećim redoslijedom (ako nisu postavljeni na svojstva koja utiču na kontekst preklapanja - neprozirnost, filter, transformacija):
Root element , koji sadrži sve elemente web stranice.
Pozicionirani elementi s negativnom vrijednošću z-indeksa.
Blok elementi, ne plutajući ili pozicionirani.
Plutajući float nisu pozicionirani elementi onim redoslijedom kojim se pojavljuju u izvornom kodu.
Inline nepozicionirani elementi (tekst, slike).
Pozicionirani elementi sa vrijednostima z-indeksa: 0; i z-indeks: auto; .
Pozicionirani elementi s pozitivnim vrijednostima z-indeksa. Visoka vrijednost indeksa će prikazati element u prvom planu. Elementi s jednakim vrijednostima z-indeksa bit će prikazani prema njihovoj lokaciji u izvornom kodu.
Rice. 4. Svojstvo z-index stvara novi kontekst za preklapanje elemenata u 3D prostoru Od autora: Dobrodošli u našu seriju od A do Ž CSS tutorijala! U ovoj seriji ću vam reći o CSS vrijednostima i svojstvima koja počinju različitim slovima abecede. Ponekad vodič nije dovoljan, a u ovom članku ću vam dati nekoliko brzih savjeta o radu sa svojstvom z-index.
Cijeli video vodič i njegovu tekstualnu verziju o svojstvu z-indexa možete pogledati na linku.
Z označava z-indeks
Kao što možete očekivati, posljednji članak u nizu bit će u potpunosti posvećen svojstvu z-indexa.
Kao što je spomenuto u video tutorijalu, svojstvo z-index kontrolira redoslijed slojeva u dokumentu. Postoji nekoliko složenih problema povezanih sa kontekstom steka, o kojima se raspravljalo u video tutorijalu, ali općenito, svojstvo z-indexa ima prilično ograničenu funkcionalnost.
z-index radi samo na pozicioniranim elementima
Ako trebate promijeniti redoslijed slojeva na elementima, to možete učiniti pomoću svojstva z-index. Međutim, ovo svojstvo će raditi samo s elementima koji imaju svojstvo položaja postavljeno na apsolutno, relativno ili fiksno.
Precizno pozicioniranje elemenata je od suštinskog značaja za kreiranje složenih rasporeda i zanimljivih obrazaca interfejsa, ali svi želimo da možemo da promenimo redosled slojeva bez potrebe da pomeramo element sa prvobitne pozicije na stranici.
Ako samo trebate promijeniti redoslijed slojeva, možete jednostavno postaviti svojstvo položaja na relativno i izostaviti gornji, desni, donji ili lijevo. Element će ostati na svom mjestu, struktura dokumenta neće biti poremećena, a svojstvo z-index će raditi kako treba.
Možete odrediti negativne vrijednosti u svojstvu z-indeksa
Slojevi se često koriste za kreiranje složenih geometrijskih oblika ili komponenti korisničkog sučelja. Ovo slojevitost uključuje postavljanje elemenata jedan iznad drugog sa konstantno rastućom vrijednošću z-indeksa. Da biste pomjerili element niz nivo, jednostavno navedite nižu vrijednost z-indeksa, ali ovo svojstvo također prihvaća negativne vrijednosti.
Negativne vrijednosti se mogu koristiti s pseudo-elementima kako bi se smjestile iza sadržaja roditeljskog elementa.
Da biste postavili :before ili after pseudoelemente ispod teksta roditeljskog elementa, morate navesti negativnu vrijednost. Ovako radi stek.
Pogledajte CodePen demo u nastavku, možete se poigrati s različitim vrijednostima z-indeksa.
Koristite 100 kao prirast za z-indeks
Kada radite sa z-indexom, nije uobičajeno pisati kod ovako:
Modalni (z-indeks: 99999; )
modalni ( z-indeks: 99999; |
Boli me kada gledam ovaj kod. Stvari postaju još gore kada dodate!važno. Kod poput ovog je znak da programer ne razumije kontekst steka i pokušava natjerati jedan sloj na drugi.
Umjesto da koristimo proizvoljne brojeve kao što su 9999, 53 ili 12, možemo sistematizirati našu skalu z indeksa i dovesti je u red. I nije zato što sam programer s opsesivno-kompulzivnim poremećajem. Iskreno.
Kao inkrement za z-indeks, ne koristim jednocifreni broj, već 100.
Sloj-jedan (z-indeks: 100;).sloj-dva (z-indeks: 200;).sloj-tri (z-indeks: 300;)
Ovaj ručni pristup kreiranju z-indeks sistema je veoma robustan, ali može postati još fleksibilniji kada je uparen sa predprocesorom kao što je Sass. To je sve, prijatelji. Ovo je bio posljednji članak u CSS A do Z seriji! Nadamo se da ste uživali i naučili mnogo o CSS svojstvima. |
Pozdrav, dragi čitaoci blog stranice! S vremena na vrijeme dozvoljavam sebi da dodam materijale u kolekciju i danas ćemo govoriti o svojstvu z-index, koje utiče na pozicioniranje elemenata na web stranici.
Morate razumjeti da ovo pravilo funkcionira samo za pozicionirane oznake za koje je navedeno svojstvo. To jest, za standardni tok dokumenta (gdje pozicioniranje nije specificirano ili je njegov parametar definiran kao statički), neće raditi. U nastavku ću demonstrirati kako z-index radi koristeći poseban primjer.
Kako z-indeks određuje pozicije elemenata
Dakle, za svaki element u CSS-u postoji svoje mjesto na web stranici u skladu sa stilovima propisanim za njega. Položaj svih blokova jedan u odnosu na drugi određuje se pomoću koordinatnog sistema.
Generalno, referentna tačka je u gornjem levom uglu oblasti za gledanje (prozor pretraživača). U ovom slučaju, X i Y osi određuju lokaciju elemenata u ravnini ekrana monitora. Ali Z osa, kao što ste vjerovatno pogodili, omogućava vam da modelirate prostorni koordinatni sistem.
Nalazi se okomito na ravan koju formiraju X i Y i usmjeren je direktno na nas. Podrazumeva se da je referentna tačka Z ose nula. Nulta točka sadrži sve statičke elemente za koje je definirano svojstvo statičkog položaja (normalno pozicioniranje).
Po defaultu, ako pozicija uopće nije navedena, onda je ova situacija apsolutno ekvivalentna onoj kao da je naveden statički parametar. U ovom slučaju, svi HTML elementi stranice se prikazuju u standardnom streamu. Dakle, pozicija, kao, na primjer, float (pogledajte informacije o kreiranju plutajućih elemenata u CSS-u) omogućava promjenu uobičajene opcije naručivanja radi rješavanja posebnih problema izgleda.
Iako elementi statične mreže imaju z vrijednost nula, što znači da su pozicionirani u X-Y ravni, postoje pravila za njih ako se počnu sudarati jedan s drugim.
Osnovno pravilo je: web element definiran tagom koji se nalazi niže u HTML kodu stranice biće nam bliže. To jest, preklapaće se na vrhu bloka čiji se kod nalazi iznad.
Ali jasno pozicionirani (dinamički) elementi (sa relativnim, apsolutnim, fiksnim vrijednostima) nalaze se iznad svih statičkih. U odnosu između dinamičkih web elemenata važiće isti zakon: onaj koji se nalazi niže u kodu nam je bliži (iznad ostalih).
Ovdje se može reći posljednja riječ z-indeks svojstvo. Što je veća njegova vrijednost u brojčanom smislu, više će se nalaziti odgovarajući element web stranice. Ali sve ovo radi, kao što sam rekao, samo za elemente sa apsolutnim, relativnim ili fiksnim pozicioniranjem. Sintaksa za parametre z-indexa je sljedeća:
Z-indeks: broj|auto|naslijediti
Numeričke vrijednosti mogu biti bilo koje: i negativne i pozitivne, uključujući nulu. Parametar auto unaprijed određuje automatski raspored web elemenata u skladu s njihovim redoslijedom u HTML kodu, uzimajući u obzir njihovo porijeklo. Vrijednost nasljeđivanja pokazuje šta je z-indeks roditelja.
Sada je došlo vrijeme da naše istraživanje usmjerimo u praktičnom smjeru kako bismo potvrdili teorijske proračune. Uzet ću tri relativno pozicionirane (sa specificiranim položajem: relativno svojstvo) kao primjer. Radi jasnoće, zapisati ću nijansu boje, okvir za svaku, a također naznačiti lijevu i gornju marginu, širinu i visinu:
Na web stranici, nakon što pretraživač interpretira HTML kod, ova tri bloka će izgledati ovako:
Napominjemo da se kontejneri nalaze u potpunosti u skladu sa gore navedenim pravilom: donja plava preklapa crvenu koja se nalazi nešto više i ona, pak, još viša zelena. Sada dodajmo svojstvo z-indeksa sa vrijednošću 1 crvenom bloku:
Slika će se promijeniti:
Kao što vidite, crveni kontejner dobija prednost i sada se nalazi iznad ostalih. Zatim, pokušajmo dodati z-indeks u zeleni blok, ali s vrijednošću 2:
Rezultat će biti ovakav:
Jasno je da je zeleni kontejner koji je dobio najveću vrijednost z-indeksa sada veći od ostalih. Dakle, svi argumenti izneseni na početku su u potpunosti potvrđeni praktičnim eksperimentima. Glavna stvar koju treba zapamtiti je da svojstvo z-index radi samo s eksplicitno pozicioniranim web elementima.
