CSS pravilo z-index - položaj elementa strani v koordinati Z: raven prikaza elementa ali plasti, v kateri se nahaja. Oznaka, katere z-indeks bo prikazan v celoti. Oznake so prikazane v vrstnem redu sledenja v vhodnem toku in se prekrivajo. Vrednost z-indeksa določa prednost vidljivosti.

Moramo spoštovati moderne brskalnike in algoritme za prikazovanje elementov. Od takrat, ko je grafika zajela zaslon in problem odstranjevanja vidnih in nevidnih delov elementov v aplikacijskih oknih, je tehnologija prikazovanja vidne vsebine dosegla odlične rezultate. V oknu brskalnika so vsi elementi nepravilno prikazani, uporabnik vidi le tisto, kar je definirano z zasnovo ali razvijalcem.

Splošno pravilo: vrstni red in raven

Vhodni tok (stran, ki ga ustvari strežnik) brskalnik prebere zaporedno. Vse oznake so prikazane v skladu s pravili CSS in se lahko prekrivajo. V tem primeru so opisani štirje vidni elementi. Vsaka naslednja se nanaša na prejšnjo. Na mestih, kjer se oznake prekrivajo, se pojavi vprašanje prioritete. Ker je pravilo z-indeks CSS v vseh teh oznakah enako in isto 848, bo viden element, ki bo viden. Zdi se, da je vse, kar je pod vsakim naslednjim elementom.

Pravilo vidnosti

Brskalniki spoštujejo pravilo videnja izključno "pošteno". Da bi prišli do algoritma, ki vam omogoča, da na debelo analizirati vse prekrivne in uporabiti samo tiste, kiresnično sekajo brez upoštevanja tistih področij, ki jih vsaka od naslednjih elementov absorbira - zelo težko.


V večini primerov to ni potrebno. Sodobna oprema deluje zelo hitro in zelo težko je opaziti prebarvanje elementa, dokler ga ne blokira naslednji element.

Vpliv na zaporedje elementov

V tretji oznaki scCSS3 je dovolj, da se poveča vrednost indeksa z, v scCSS4 pa se zmanjša, ko se celotna slika spremeni. V tem primeru zaporedje lokacij elementov v toku ostane isto:

div id = 'scCSS1';

div id = 'scCSS2';

div id = 'scCSS3';

div id = 'scCSS4'.

Treba je opozoriti, da druga slika dejansko zavzema več prostora, kot se zdi. Tudi tretja slika. Poleg tega je sestavljen iz dveh delov (dve jajci), ki sta oddaljeni drug od drugega. Dejanske dimenzije območij, ki zasedajo drugo in tretjo sliko, so označene z rumeno in sivo.

Kombiniranje z-indeksa z barvo ozadja

Opozoriti je treba, da so lastnosti ozadja & amp; z-indeks se dopolnjujejo. Vsi blokovni elementi, kot tudi vsi drugi, imajo vedno pravokotno območje, ki ga tvorijo največja višina in največja širina vsebine. Z uporabo slike lahko zagotovite katerokoli obliko območja elementa, toda okoli njega bo vedno pravokotnik. To je dejstvo, ki ga je treba pravilno upoštevati. Besedilo lahko postavite vzdolž obrisa izbrane oblike, če pa tega ne storite, vsebina pade v kateri koli element, kot je pravokotenin vnos iz vhodnega toka.
Uporaba lastnine z-indeksa CSS v elementu, katerega barva ozadja je pregledna (nekakšna preglednost), vam omogoča emulacijo konture elementa. Čeprav bo v resnici element dejansko pravokoten.

Dogodki in vidnost elementov

Na mestih, kjer je element blokiran z drugim elementom, dogodki na njem ne bodo delovali. Po splošnem pravilu je, če je artikel neviden, tudi zunaj dosega. Če razvijalec želi blokirati gumb ali točko menija, lahko postavi drugo oznako nad blokirano oznako, po možnosti pregledno (na primer z nepreglednostjo CSS), vendar ima v vsakem primeru višji indeks z. Ker se dogodki lahko delijo na tiste, ki z vidika uporabnika niso pomembni, se lahko slednja (premikanje miške, nenamerno pritiskanje gumba na tipkovnici, časovni signal) uporabijo za ustrezno spreminjanje vsebine v oknu brskalnika. Preprost primer: obiskovalec je premaknil kazalec na element menija, vendar se še ni odločil, da bo karkoli naredil. Razvijalec lahko predvidi ta dogodek, sledi gibanju do želene točke dialoga (klik - obiskovalec sprejme odločitev) in prikaže ustrezno vsebino. Pravilo z-indeksom CSS za to ni najbolj primerno.

Oblika slike

Ker je podoba pomemben gradbeni material za katero koli spletno mesto (lepota, modernost, funkcionalnost - je že običajno pravilo stvari), je izbira oblike pomembna zaslik Na splošno lahko uporabite vse različne obstoječe formate, vendar je glede praktičnosti in učinkovitosti smiselno omejiti * .png na statične slike in * .gif - za animirane slike. Priljubljena * .jpg je prav tako dobra, vendar vam ne omogoča prilagodljivega spreminjanja območja prikaza.

Napake brskalnika in razvijalca

Z-indeks CSS ne deluje tako pogosto, vendar se zgodi. Pravila kaskadnega slogovnega lista vedno delujejo, obseg slogovne datoteke pa pogosto doseže velike količine. Ko je nekaj narobe ali preprosto ni potrebno, morate najprej preveriti svojo kodo, nato počistiti predpomnilnik brskalnika in ponovno preveriti svojo kodo.
Razlaga HTML in CSS, brskalnik skoraj ne dopušča napak - to je aksiom. Če ni zahtevanega elementa, potem v CSS-izvedbi {position: absolute; z-indeks: 112233; levo: 10px; vrh: 20px; } nekaj zgrešenega ali napisanega napačno. Najpogostejša napaka je nepravilno določena koordinata elementa, manjka pa indikacija njene vidnosti, absolutnega ali relativnega položaja. Včasih lahko vodnik za slog deluje neposredno na elementu, ne v njegovem slogu. V slednjem primeru je to izhod iz situacije, vendar to v prvi vrsti govori o nekakšni napaki v kodi. Slog mora biti podan v slogu razreda ali identifikatorja. Slog elementa določite samo v izjemnih primerih. Uporaba jQuery.css (z-index, 123) lahko vodi tudi do napake, če ni uporabljena za razred ali kodo. Poleg tega je jQuery res odlično orodje za razvijalce.Vendar, preden ga uporabite, vam ne bo preprečilo razmišljanja o orodjih HTML /CSS, z-indeks ni pravilo, ki ne zahteva pozornosti.

Pravilne plasti in logični premik

Idealna stran je ravna. V vsakem primeru, v realnem obsegu slike v velikem obsegu daleč, vendar ni posebne potrebe. Moderna spletišča so prava praksa, prave naloge. Samo delati morajo, no, stanovanje prikaže skupno sliko. Mimogrede, pojav ciljne strani (ciljne strani) v obliki "design strani" možnosti - najboljši dokaz, da ravno pravokotne oblike in suho, vendar zelo jasno vsebino - je tudi dobro in praktično. Vendar je treba opozoriti, da mesta monopol družbe ostala na svojih: glavna stvar - družbe obraz, njegovo funkcionalnost in proizvodne zmogljivosti. Pošasti informacijskih tehnologij so priznale, da so ciljne strani oseba majhnega podjetja, dodatki, herbalife in drugi "kostumski nakit". Ali je to res ali ne, se bo pokazala prihodnost. Pomembno je, da je v vsaki različici gradbišča smiselno ne le postavljati vsebino, ampak tudi zagotoviti pravilno gibanje med njimi. Popolna rešitev je AJAX (stran se posodablja, kot je potrebno). Še bolj obetavna rešitev, ko na strani prikaže, kaj je potrebno v tem trenutku v oknu brskalnika. V bistvu je z-indeks preprosto pravilo CSS. Njegov namen je prikazati raven oznake, tako da lahko brskalnik določi, kdaj bo prikazal element in kateri del tega elementa bovidno. Sloj in stran sta zelo relativna pojma, ker je težko oblikovati stran in ohraniti vrednost pravila z-indeksa za različne možnosti prikaza.