CSS z-indeks: pregled, lastnosti

CSS pravilo z-indeks - položaj elementa strani v koordinatah Z: raven prikaza elementa ali plasti, v kateri se nahaja. Oznaka, ki ima več indeksa z-indeksa, bo prikazana v celoti. Oznake so prikazane v vrstnem redu, ki se pojavljajo v dohodni niti, in se med seboj prekrivajo. Vrednost z-indeksa določa

Zahvaliti moramo sodobnim brskalnikom in algoritmom za prikazovanje elementov. Od trenutka, ko grafika zajame zaslone in je prišlo do težave z odrezovanjem vidnih in nevidnih delov elementov v aplikacijskih oknih, je tehnologija prikaza vidne vsebine dosegla odlične rezultate. V oknu brskalnika so vsi elementi prikazani pravilno, uporabnik vidi samo tisto, kar je določil projektant ali razvijalec.

Splošno pravilo: vrstni red in raven

Brskalnik bere vhodni tok (stran, ki jo tvori strežnik). Vse oznake so prikazane v skladu s CSS pravili in se lahko prekrivajo.

V tem primeru so opisani štirje vidni elementi. Vsako naslednje blokira prejšnjo. Na mestih, kjer se oznake sekajo, se pojavi vprašanje prednostne naloge. Ker je pravilo CS z indeksa CSS za vse te oznake enako 848, se vidi naslednji element, ki sledi. Vse, kar gleda iz vsakega naslednjega elementa, očitno.

Pravilo vidnosti

Brskalniki upoštevajo pravilo vidnosti izključno "iskreno". Če želite pomisliti na algoritem, s katerim lahko analizirate vse prekrivne elemente v velikem obsegu in uporabite le tiste, ki se resnično sekata, ne da bi upoštevali tista mesta, ki jih absorbira vsak od naslednjih elementov, je zelo težko.

V večini primerov to ni potrebno. Sodobna oprema deluje zelo hitro, in zelo težko je opaziti preoblikovanje elementa, preden ga element preglasi.

Učinek na zaporedje elementov

Dovolj je, da tretja oznaka scCSS3 poveča vrednost z-indeksa in scCSS4, da se zmanjša, ker se splošna slika spremeni. Zaporedje elementov v toku ostane enako:

• div id =`scCSS1`-
• div id =`scCSS2`-
• div id =`scCSS3`-
• div id =`scCSS4`.

Treba je opozoriti, da druga slika dejansko zajema več prostora, kot se zdi. Tretja slika tudi. Poleg tega je sestavljen iz dveh delov (dveh jajc), ki sta med seboj razdalja.

Pravilne dimenzije območij, ki zasedajo drugo in tretjo podobo, so označene v rumeni in sivi barvi.

Združevanje z-indeksa z barvo ozadja

Upoštevajte, da so lastnosti ozadja CSS z-indeks se dopolnjujeta. Vsi elementi bloka in vsi drugi, vedno zasedajo pravokotno območje, ki ga tvori največja višina in največja širina vsebine.

Z uporabo slik lahko oblikujemo katero koli obliko v območju elementa, vedno pa bo pravokotnik okoli njega. To je dejstvo, ki je pomembno upoštevati pravilno.

Besedilo lahko postavite okrog obrisa izbrane oblike, če pa ne, vsebina pade v kateri koli element, kot v pravokotni škatli, zaporedoma, kot izhaja iz vhodnega toka.

Z uporabo lastnosti CS-indeksa CSS v elementu, ki ima barvo ozadja vrednost transparentna (vrsta preglednosti), vam omogoča, da posnemate kakršne koli oris elementa. Čeprav je v vsakem primeru v resnici element pravokoten.

Dogodki in vidnost elementov

Na mestih, kjer je element blokiran z drugim elementom, dogodki na njem ne bodo delovali. Kot splošno pravilo, če element ni viden, je tudi izven dosega.

Če razvijalec želi zakleniti gumb ali element menija, lahko z lahkoto postavi drugo oznako prek blokirane oznake, morda pregledno (na primer z uporabo pravila Motnost CSS), vendar v vsakem primeru z višjim indeksom CSS z-indeksom.

Ker so dogodki z vidika uporabnika lahko razdeljeni v smiselno in brez takega, lahko slednje (premikanje miške, nenamerno pritiskanje na tipko na tipkovnici, signalni časovnik) lahko uporabite za ustrezno spreminjanje vsebine v oknu brskalnika.

Preprost primer: obiskovalec se je premaknil kazalec miške na elementu menija, vendar se še ni odločil ničesar storiti. Razvijalec bi lahko predvidel ta dogodek, spremljal gibanje do želene točke dialoga (kliknite - obiskovalec sprejme odločitev) in prikaže ustrezno vsebino. Pravilo z-index CSS je najbolje za ta primer.

Format slike

Ker so slike pomemben gradbeni material za vsako spletno stran (lepota, modernost, funkcionalnost je že običajna norma stvari), je zelo pomembno, da izberete obliko za slike.

Na splošno lahko uporabite vse raznolike obstoječe formate, vendar z vidika praktičnosti in učinkovitosti je smiselno omejiti * .jpg za statične slike in * .jpg za animirane slike. Priljubljen * .jpg je tudi dober, vendar vam ne omogoča fleksibilnega manipuliranja s prikaznim prostorom.

Napake brskalnika in razvijalca

Pogosto ni situacije, ko CS-indeks z indeksom ne deluje, vendar se zgodi. Pravila tabele kaskadnih slogov vedno delujejo, glasnost slogovne datoteke pa pogosto doseže znatne količine. Ko se nekaj ne prikaže pravilno ali preprosto ni, kaj je treba, najprej preverite lastno kodo, nato počistite predpomnilnik brskalnika in znova preverite lastno kodo.

Tolmačenje HTML in CSS, brskalnik skoraj ne naredi napak - to je aksiom. Če ni želenega elementa, potem v konstrukciji CSS {položaj: absolutno- z-indeks: 112233-levo: 10px; na vrh: 20px; ...} nekaj manjka ali je napisano narobe.

Najpogostejša napaka - koordinate elementa so nepravilne, manjka indikacija njegove vidnosti, absolutnega ali relativnega položaja. Včasih je slog mogoče določiti neposredno na elementu, ne v svojem slogu. V zadnjem primeru je to izhod iz stanja, vendar to v prvi vrsti kaže napako v kodi.

Slog mora biti podan v slogu razreda ali identifikatorja. V izjemnih primerih določite slog elementa.

Uporaba jQuery.css (z-indeks, 123) lahko povzroči tudi napako, če se uporablja za napačen razred ali identifikator. Poleg tega je jQuery res odlično orodje za razvijalce. Vendar pa pred uporabo tega ne boli misli: ne more storiti z improviziranim HTML / CSS, z-indeks ni pravilo, ki ne potrebuje posebne pozornosti.

Pravilne plasti in logično gibanje

Idealna stran je ravna. V vsakem primeru je daleč od resnične glasbene podobe v množičnem obsegu in za to ni posebne potrebe. Sodobna spletna mesta so prave prakse, prave naloge. Samo delati morajo, a ravne kažejo tridimenzionalno podobo.

Mimogrede, pojav ciljne strani (ciljna stran) v obliki variante "gradnje mest" je najboljša potrditev, da so ravne pravokotne oblike in suha, a zelo čista vsebina tudi dobra in praktična. Vendar je treba opozoriti, da so mesta monopolnih družb ostala pri njihovi: glavna stvar je obraz družbe, njegova funkcionalnost in proizvodna zmogljivost. Informacijska tehnologija Monstri so šteli, da so ciljne strani obraz malih podjetij, dodatkov, herbalife in drugih "bižuterij".

Torej ali ne, kot je dejansko pravilna, bo prihodnost pokazala. Pomembno je, da je s katero koli različico spletnega mesta smiselno ne samo barvati slojev vsebine, ampak tudi zagotoviti pravilno gibanje med njimi.

Popolna rešitev je AJAX (stran je posodobljena po potrebi). Še bolj obetavna rešitev, ko stran prikazuje, kaj je potrebno na določeni točki v oknu brskalnika.

Dejansko je z-indeks preprosto pravilo CSS. Njen namen je pokazati raven oznake, tako da lahko brskalnik določi, kdaj naj se prikaže element in kateri del tega elementa bo viden. Layer in stran sta zelo relativni koncepti, saj je težko razviti stran in imeti v mislih vrednosti pravila z indeksa za različne možnosti prikaza vsebine.

Ponavadi razvijalec izbere najljubšo številko in ji dati vse zapise v zaporedju, tisti, ki morajo nekako izstopati, dodelijo naslednjo številko. Dajanje pomembnosti plasti in ravni strani ni posebej napredna in obetavna praksa.

Če prenesete semantiko z-indeksa na dialog z obiskovalcem, lahko ustvarite praktičen učinek. Podobno, kako se lahko oznake prekrivajo, lahko prekrijete pogovorna okna (spletno mesto obiskovalcev) in opravite gibanje med njimi. S tega vidika se uporaba CSS-pravila z indeksom zdi zelo praktična in praktična.