CSS z-index: pregled, svojstva

CSS pravilo z-indeks - položaj elementa stranice u Z koordinatu: razina prikaza elementa ili sloja u kojem se nalazi. Oznaka koja ima više z-indeksa bit će prikazana u cijelosti. Oznake se prikazuju redom kojim se pojavljuju u dolaznoj nit i preklapaju se jedna s drugom. Vrijednost z-indeksa određuje

Moramo se odati počast modernim preglednicima i algoritmima za prikaz elemenata. Od trenutka kada su grafikoni snimili zaslone i pojavio se problem vidljivih i nevidljivih dijelova elemenata u aplikacijskim prozorima, tehnologija prikazivanja vidljivog sadržaja postigla je odlične rezultate. U prozoru preglednika sve su stavke ispravno prikazane, korisnik vidi samo ono što definira dizajn ili programer.

Opće pravilo: red i razina

Ulazni stream (stranica koju oblikuje poslužitelj) čita preglednik redoslijedom. Sve oznake prikazuju se u skladu s pravilima CSS i mogu se preklapati.

U ovom primjeru opisane su četiri vidljive stavke. Svaka sljedeća blokira prethodnu. Na mjestima gdje se oznake križaju, postavlja se pitanje prioriteta. Budući da je pravilo CSS za sve te oznake z-indeks jednak i jednako 848, vidljiv je element koji slijedi. Sve što izgleda iz svakog sljedećeg elementa, očito.

Pravilo o vidljivosti

Preglednici poštuju pravilo vidljivosti isključivo "iskreno". Da se s algoritmom koji vam omogućuje da analizira sve bruto nametanje i koristiti samo one koje presijecaju, osim onih dijelova koji su apsorbira svaki slijedeći elementa - je vrlo teško.

U većini slučajeva to nije potrebno. Suvremena oprema radi vrlo brzo, a vrlo je problematično primijetiti ponovno stvaranje elementa prije nego što sljedeći element nadjačava.

Utjecaj na niz elemenata

Dovoljno je da treća oznaka scCSS3 povećava vrijednost z-indeksa, a scCSS4 ga smanjuje, kako se opća slika mijenja. Niz elemenata u streamu ostaje isti:

• div id =„scCSS1`-
• div id =„scCSS2`-
• div id =„scCSS3`-
• div id =`ScCSS4`.

Valja napomenuti da druga slika zapravo zauzima više prostora nego što se čini. Treća slika, također. Osim toga, sastoji se od dva dijela (dva jaja), koji se nalaze na međusobnoj udaljenosti.

Stvarne dimenzije područja koja zauzimaju drugu i treću sliku označene su žutim i sivim bojama.

Kombinirajući z-indeks s pozadinskom bojom

Napominjemo da su CSS pozadinska svojstva z-indeks međusobno nadopunjuju. Svi blok elementi, i svi ostali, uvijek zauzimaju pravokutni prostor formiran maksimalnom visinom i maksimalnom širinom sadržaja.

Koristeći slike, možete dati bilo koji oblik područja elementa, ali uvijek će biti pravokutnik oko nje. To je činjenica koja je važna pravilno uzeti u obzir.

Možete staviti tekst na put izabran oblik, ali ako ne, sadržaj dobiva bilo kojeg elementa u pravokutni okvir, sukcesivno, po primitku ulaz.

Koristeći z-index CSS svojstvo u elementu koji pozadinsku boju ima vrijednost prozirnom (vrsta transparentnosti), dopušta vam oponašanje bilo kakvog obrisa elementa. Iako u svakom slučaju u stvarnosti element će biti pravokutni.

Događaji i vidljivost elementa

Na mjestima na kojima element blokira drugi element, događaji na njemu neće funkcionirati. Kao opće pravilo, ako je element izvan vidokruga, također je izvan dosega.

Ako programer želi zaključati gumb ili stavku izbornika, lako može postaviti drugu oznaku nad blokiranom oznakom, možda transparentnom (na primjer, pomoću pravila CSS neprozirnost), ali u svakom slučaju imaju veći CSS z-indeks.

Od događaja, od korisnika točke gledišta, može se podijeliti na relevantan i ne imati bilo koji, zatim zadnji (pomicanjem miša, pritiskom slučajnih tipke na tipkovnici, timer signala) može se koristiti za adekvatno promijeniti sadržaj u prozoru preglednika.

Jednostavan primjer: posjetitelj se preselio pokazivač miša na stavci izbornika, ali još nije odlučio ništa učiniti. Razvojni programer mogao bi predvidjeti taj događaj, pratiti kretanje na željenu točku dijaloga (klik - posjetitelj donosi odluku) i prikazati odgovarajući sadržaj. Pravilo CSS z-indeksa je najprikladnije za ovaj slučaj.

Format slike

Budući da su slike važan građevinski materijal za bilo koju web stranicu (ljepota, modernost, funkcionalnost je već uobičajena norma stvari), od velike je važnosti odabrati format za slike.

Uglavnom, možete koristiti sve niz postojećih formata, ali u smislu praktičnosti i učinkovitosti je prilično razumno ograničiti * .jpg za statičke slike i * .jpg - za animirane slike. Popularni * .jpg također je dobar, ali vam ne dopušta fleksibilno manipuliranje prostorom za prikaz.

Pogreške u pregledniku i razvojnom programeru

Ne tako često postoji situacija kada CSS z-index ne radi, ali to se događa. Pravila stila kaskadnog stila uvijek funkcioniraju, a obujam stilskog dokumenta često doseže značajne količine. Kada se nešto ne prikazuje ispravno ili jednostavno ne postoji ono što bi trebalo biti, prvo morate provjeriti vlastiti kôd, a zatim izbrisati predmemoriju preglednika i ponovno provjeriti vlastiti kôd.

Tumačenje HTML i CSS, preglednik gotovo ne griješi - to je aksiom. Ako nema željenog elementa, onda u konstrukciji CSS {pozicija: apsolutno- z-indeks: 112233-lijevo: 10px; vrh: 20px; ...} nešto nedostaje ili je napisano pogrešno.

Najčešća pogreška - koordinate elementa su netočne, pokazatelj njegove vidljivosti, apsolutni ili relativni položaj nedostaje. Ponekad se stil može odrediti izravno na elementu, a ne u njegovom stilu. U potonjem slučaju to je izlaz iz situacije, ali to prvenstveno pokazuje pogrešku u kodu.

Stil mora biti specificiran u stilu klase ili identifikatora. Odredite stil na elementu samo u izuzetnim slučajevima.

Upotreba jQuery.css (z-indeks, 123) također može rezultirati pogreškom ako se primjenjuje na pogrešnu klasu ili identifikator. Osim toga, jQuery je doista velik alat za razvojne programere. Međutim, prije nego što ga primjenjuju, a ne povrijediti razmišljati: je li moguće da se dijeliti s improviziranom znači HTML / CSS, Z-indeks - nije pravilo da ne zahtijeva hitnu pozornost.

Ispravni slojevi i logično kretanje

Idealna stranica je ravna. U svakom slučaju, daleko je od stvarne slike volumena na masovnoj skali, a za to nema posebne potrebe. Suvremena su mjesta stvarna praksa, pravi zadaci. Oni samo moraju raditi, ali ravni pokazuju trodimenzionalnu sliku.

Usput, fenomen odredišne ​​stranice (Odredišne ​​stranice) u obliku opcija „položaj zgrade” - najbolji je dokaz da je stan pravokutnog oblika i suho, ali iznimno precizan sadržaj - i dobro i praktično. No, valja napomenuti da su stranice monopolskih tvrtki ostale sa svojim: glavna stvar je lice tvrtke, njegova funkcionalnost i proizvodni kapacitet. Informacijska tehnologija Čudovišta smatraju da su odredišne ​​stranice lice malog biznisa, pribora, herbalifea i ostalih "kostima".

Dakle, to ili ne, kao što je to točno, budućnost će se pokazati. Važno je da s bilo kojom verzijom web mjesta ima smisla ne samo slikati slojeve sadržaja, već i osigurati ispravno kretanje između njih.

Savršeno rješenje je AJAX (stranica se po potrebi ažurira). Još više obećavajuće rješenje kada stranica prikazuje ono što je potrebno na određenoj točki u prozoru preglednika.

Zapravo, z-indeks je jednostavan CSS pravilo. Njegova je svrha prikazati razinu oznake tako da preglednik može odrediti kada će prikazati element i koji će dio tog elementa biti vidljiv. Slojevi i stranica vrlo su relativni koncepti, jer je problematično razviti stranicu i imati na umu vrijednosti pravila z-indeksa za različite opcije prikazivanja sadržaja.

Obično programer odabire omiljeni broj i daje ga svim oznakama u nizu, a oni koji moraju nekako izdvojiti dodjeljuju sljedeći broj. Davanje značaja za slojeve i razine stranica nije osobito progresivna i obećavajuća praksa.

Međutim, ako prenesete z-indeks semantiku u područje dijaloga s posjetiteljem, možete stvoriti praktičan učinak. Slično tome kako se oznake mogu preklapati, možete preklapati dijaloge (web-lokaciju posjetitelja) i izvršiti kretanje između njih. S ove točke gledišta, korištenje pravilnika CSS z-index čini se vrlo praktičnim i praktičnim.