CSS z-indeks: Pregled, Svojstva

CSS pravilo z-index - položaj elementa stranice u Z koordinati: razina prikaza elementa ili sloja u kojem se nalazi. Oznaka, čiji će z-indeks biti prikazan u cijelosti. Oznake se prikazuju u redoslijedu njihovog praćenja u ulaznoj struji i međusobno se preklapaju. Vrijednost z-indeksa određuje prioritet vidljivosti.

Moramo odati počast modernim preglednicima i algoritmima za prikazivanje elemenata. Od vremena kada su grafike snimale zaslone i problem odvajanja vidljivih i nevidljivih dijelova elemenata u prozorima aplikacija, tehnologija prikazivanja vidljivog sadržaja postigla je izvrsne rezultate. U prozoru preglednika, sve se stavke prikazuju pogrešno, korisnik vidi samo ono što je definirano dizajnom ili programer.


Opće pravilo: redoslijed i razina

Ulazni tok (stranica koju generira poslužitelj) preglednik pregledava u nizu. Sve oznake prikazuju se u skladu s CSS pravilima i mogu se preklapati.
U ovom primjeru opisana su četiri vidljiva elementa. Svaka sljedeća se nadovezuje na prethodnu. Na mjestima gdje se oznake preklapaju, postavlja se pitanje prioriteta. Budući da je pravilo z-indeksa CSS u svim tim oznakama isto i isto 848, tada će element koji će biti vidljiv biti vidljiv. Čini se da sve što izgleda ispod svakog sljedećeg elementa.

Pravilo vidljivosti

Preglednici se pridržavaju pravila gledišta isključivo "iskreno". Da biste došli do algoritma koji vam omogućuje da analizirate na veliko sve slojeve i primijenite samo onedoista se sijeku bez uzimanja u obzir onih područja koja apsorbira svaki od sljedećih elemenata - vrlo je teško.


U većini slučajeva to nije potrebno. Suvremena oprema radi vrlo brzo i vrlo je problematično primijetiti ponovno bojanje elementa dok ga ne blokira sljedeći element.

Učinak na slijed elemenata

U trećoj scCSS3 oznaci dovoljno je povećati vrijednost z-indeksa, au scCSS4 ga smanjiti kako se ukupna slika mijenja. U ovom slučaju, slijed lokacija elemenata u streamu ostaje isti:
  • div id = 'scCSS1';
  • div id = 'scCSS2';
  • div id = 'scCSS3';
  • div id = 'scCSS4'.
  • Treba napomenuti da druga slika zapravo zauzima više prostora nego što se čini. I treća slika. Osim toga, sastoji se od dva dijela (dva jaja) koji su na međusobnoj udaljenosti.
    Stvarne dimenzije područja koje zauzimaju drugu i treću sliku označene su žutom i sivom bojom.

    Kombinirajući z-indeks s pozadinskom bojom

    Treba napomenuti da su svojstva pozadine CSS-a i pozadine. z-indeks se međusobno nadopunjuju. Svi blok elementi, kao i svi ostali, uvijek zauzimaju pravokutno područje formirano maksimalnom visinom i maksimalnom širinom sadržaja.
    Koristeći sliku, možete dati bilo koji oblik područja elementa, ali oko nje uvijek će biti pravokutnik. To je činjenica koju je važno pravilno uzeti u obzir. Tekst možete postaviti uz obris odabranog oblika, ali ako to ne učinite, sadržaj pada u bilo koji element, poput pravokutnogokvir, i dosljedno, kao ulaz iz ulaznog toka.
    Korištenje svojstva z-indeksa CSS-a u elementu čija je pozadinska boja prozirna (neka vrsta transparentnosti) omogućuje imulaciju bilo koje konture elementa. Iako će u svakom slučaju element biti pravokutan.

    Događaji i vidljivost elemenata

    Na mjestima gdje je element blokiran drugim elementom, događaji na njemu neće raditi. Prema općem pravilu, ako je predmet izvan vidokruga, on je također izvan dosega.
    Ako programer želi blokirati gumb ili stavku izbornika, on može staviti još jednu oznaku preko blokirane oznake, možda transparentnu (na primjer, pomoću CSS neprozirnosti), ali u svakom slučaju ima veći CSS z-indeks. Budući da se događaji mogu podijeliti na one koji nisu važni s gledišta korisnika, potonji (pomicanje miša, slučajno pritiskanje gumba na tipkovnici, signal tajmera) može se koristiti za adekvatnu promjenu sadržaja u prozoru preglednika. Jednostavan primjer: posjetitelj je pomaknuo pokazivač na stavku izbornika, ali još nije odlučio učiniti ništa. Programer može predvidjeti ovaj događaj, pratiti kretanje do željene točke dijaloga (klik - posjetitelj donosi odluku) i prikazati odgovarajući sadržaj. CSS z-indeks pravilo nije najbolje prikladno za to.

    Format slike

    Budući da je slika važan građevinski materijal za bilo koje mjesto (ljepota, modernost, funkcionalnost - već je uobičajeno pravilo stvari), izbor formata je važan zaslike. Općenito gledano, možete koristiti sve različite postojeće formate, ali u smislu praktičnosti i učinkovitosti razumno je ograničiti * .png na statične slike i * .gif - za animirane slike. Popularna * .jpg je također dobra, ali ne dopušta fleksibilnu manipulaciju područja prikaza.

    Pogreške preglednika i programera

    CSS z-indeks ne radi tako često, ali se događa. Pravila kaskadnog stila uvijek djeluju, a volumen stilske datoteke često doseže značajne količine. Kada nešto nije u redu ili jednostavno ne mora biti, najprije morate provjeriti vlastiti kôd, zatim izbrisati predmemoriju preglednika i ponovno provjeriti vlastiti kôd.
    Tumačenje HTML-a i CSS-a, preglednik gotovo ne dopušta pogreške - to je aksiom. Ako ne postoji traženi element, onda u CSS-u {position: absolute; z-indeks: 112233; lijevo: 10px; vrh: 20px; } nešto pogrešno ili napisano pogrešno. Najčešća pogreška su pogrešno specificirane koordinate elementa, nedostaju naznake njegove vidljivosti, apsolutnog ili relativnog položaja. Ponekad vodič za stil može raditi izravno na elementu, a ne u njegovom stilu. U potonjem slučaju, ovo je izlaz iz situacije, ali to prije svega govori o nekoj vrsti pogreške u kodu. Stil mora biti naveden u stilu klase ili identifikatora. Navedite stil elementa samo u iznimnim slučajevima. Korištenje jQuery.css (z-index, 123) također može dovesti do pogreške ako se ne primjenjuje na klasu ili kod. Osim toga, jQuery je doista sjajan razvojni alat.Međutim, prije nego što ga primijenite, neće vas spriječiti da razmišljate o HTML /CSS alatima, z-index nije pravilo koje ne zahtijeva veliku pozornost.

    Ispravni slojevi i logički pomak

    Idealna stranica je ravna. U svakom slučaju, do stvarne mase u velikom opsegu daleko, ali nema posebne potrebe. Moderna mjesta su prava praksa, stvarni zadaci. Oni samo moraju raditi, pa, stan prikazuje masovnu sliku. Usput, fenomen odredišnih stranica (odredišna stranica) u obliku "site design" opcija - najbolji dokaz da su ravni pravokutni oblici i suhi, ali izuzetno jasan sadržaj - također dobar i praktičan. No, treba napomenuti da mjesta monopola tvrtke ostao na njihovom: glavna stvar - tvrtke lice, njegove funkcionalnosti i proizvodnih kapaciteta. Čudovišta informacijskih tehnologija prepoznala su da su odredišne ​​stranice osoba malog biznisa, pribora, herbalifea i drugih "kostimiranih nakita".
    Bilo da je to istina ili ne, budućnost će se pokazati. Važno je da u svakoj varijanti izgradnje gradilišta ima smisla ne samo postavljati sadržaj, nego i osigurati ispravno kretanje između njih. Savršeno rješenje je AJAX (stranica se ažurira prema potrebi). Još više obećavajuće rješenje kada stranica prikazuje ono što je potrebno u ovom trenutku u prozoru preglednika.
    U osnovi, z-indeks je jednostavno CSS pravilo. Njegova je svrha pokazati razinu oznake tako da preglednik može odrediti kada će prikazati element i koji će dio tog elementa bitividljivi. Sloj i stranica su vrlo relativni pojmovi, jer je problematično dizajnirati stranicu i imati na umu vrijednost pravila z-indeksa za različite opcije prikaza.
    Obično, programer bira omiljeni broj i daje mu sve oznake u nizu, a oni koji se moraju nekako izdvojiti dodjeljuju sljedeći broj. Dodijeliti vrijednost slojevima i razinama stranice nije osobito progresivna i obećavajuća praksa. Međutim, ako pomaknete semantiku z-indeksa u dijalog s posjetiteljem, možete stvoriti praktičan učinak. Kao što se oznake mogu međusobno preklapati, možete nametnuti dijaloge (posjetiteljska stranica) i premjestiti se između njih. S ove točke gledišta, primjena Z-indeksa pravila CSS-a čini se vrlo razumnim i praktičnim.

    Povezane publikacije