CSS z-indeks: oversigt, egenskaber

CSS-regel z-indeks - placeringen af ​​sideelementetpå koordinaten Z: niveauet af elementets display eller det lag, hvori det er placeret. Et mærke med mere z-indeks vil blive vist i sin helhed. Taggene vises i den rækkefølge, de vises i den indkommende tråd, og overlapper hinanden. Værdien af ​​z-indeks bestemmer synlighed prioritet.

Det er nødvendigt at hylde moderne browsere ogalgoritmer til visning af elementer. Siden den tid, hvor grafik har indfanget skærme, og problemet med at klippe synlige og usynlige dele af elementer i applikationsvinduer er opstået, har teknologien til at vise synligt indhold opnået gode resultater. I browservinduet vises alle elementer korrekt, brugeren ser kun, hvad der er defineret af designeren eller udvikleren.

Generel regel: orden og niveau

Indgangsstrømmen (siden dannet af serveren) læses af browseren i rækkefølge. Alle tags vises i overensstemmelse med CSS regler og kan overlappe hinanden.

I dette eksempel beskrives fire synlige elementer. Hver næste blokerer den forrige. På steder hvor tags krydser, opstår spørgsmålet om prioritet. Da z-indeks-CSS-reglen for alle disse tags er den samme og lig med 848, er det element, der går næste, synligt. Alt der ser ud fra under hvert næste element, tilsyneladende.

Sigtbarhedsregel

Browsere overholder synlighedsreglenudelukkende "ærligt". At tænke op en algoritme, hvor du kan analysere alle overlejringer i løs vægt og kun anvende dem, der virkelig skærer hinanden uden at tage hensyn til de websteder, der absorberes af hver af de følgende elementer, er meget vanskeligt.

I de fleste tilfælde er det ikke nødvendigt. Moderne udstyr fungerer meget hurtigt, og det er meget problematisk at bemærke genopretningen af ​​elementet, før det næste element overstyrer det.

Virkning på sekvensen af ​​elementer

Det er nok for det tredje tag scCSS3 at øge værdien af ​​z-indeks og scCSS4 for at reducere det, som det generelle billede ændres. Sekvensen af ​​elementer i strømmen forbliver den samme:

• div id ="ScCSS1";
• div id ="ScCSS2";
• div id ="ScCSS3";
• div id ="ScCSS4".

Det skal bemærkes, at den andenBilledet tager faktisk mere plads end det ser ud til. Det tredje billede også. Derudover består den af ​​to dele (to æg), der ligger i afstand fra hinanden.

De reelle dimensioner af de områder, der besætter det andet og tredje billede, fremhæves i henholdsvis gule og grå farver.

Kombinere z-indeks med baggrundsfarve

Det skal bemærkes, at CSS-egenskabernebaggrund og z-indeks supplerer hinanden. Alle blokelementer og alle andre har altid et rektangulært område dannet af maksimal højde og indholdets maksimale bredde.

Ved hjælp af billederne kan du give nogen form til elementets område, men der vil altid være et rektangel omkring det. Dette er et faktum, der er vigtigt at tage hensyn til korrekt.

Du kan placere tekst omkring den valgte vej.figur, men hvis du ikke gør det, falder indholdet ind i ethvert element, som i en rektangulær boks og i rækkefølge som det kommer fra indgangsstrømmen.

Brug af z-indeks CSS-ejendommen i et element,Hvilken baggrundsfarve har værdien gennemsigtig (en slags gennemsigtighed), giver dig mulighed for at efterligne en oversigt over et element. Selvom elementet i hvert fald i virkeligheden vil være rektangulært.

Begivenheder og element synlighed

På steder, hvor et element er blokeret af et andet element, virker hændelser på det ikke. Som en generel regel, hvis elementet er ude af syne, er det også uden for rækkevidde.

Hvis bygherren ønsker at låse knappen ellermenupunktet, kan det godt anbringes over den låsende tag et andet mærke, måske en gennemsigtig (fx under anvendelse af reglen om CSS opacitet), men under alle omstændigheder, der har en højere CSS z-indeks.

Siden begivenhederne fra brugeren pegerfra synspunkt kan opdeles i meningsfuldt og ikke have sådan, så sidstnævnte (ved at flytte musen, ved et uheld at trykke på en tast på tastaturet, timersignal) kan bruges til at ændre indholdet i browservinduet på passende vis.

Et simpelt eksempel: Besøgende har flyttet musemarkøren over menupunktet, men har endnu ikke besluttet at gøre noget. Udvikleren kunne sørge for denne begivenhed, spore bevægelsen til det ønskede punkt i dialogen (klik - den besøgende træffer en beslutning) og vise det passende indhold. Z-indeks-CSS-reglen passer bedst til denne sag.

Billedformat

Fordi billeder er vigtigebyggemateriale til ethvert sted (skønhed, modernitet, funktionalitet - allerede den sædvanlige norm for ting), er valget af format for billeder af stor betydning.

I det store og hele kan du bruge alleen række eksisterende formater, men fra praktisk synspunkt og effektivitet er det ret rimeligt at begrænse * .png til statiske billeder og * .gif til animerede billeder. Populær * .jpg er også god, men det tillader ikke fleksibiliteten til at manipulere displayrummet.

Browser og udviklerfejl

Det er ikke ofte tilfældet, at CSSz-indekset virker ikke, men det sker. Regler for kaskadeark stilarkitektur arbejder altid, og størrelsen af ​​stilfilen når ofte betydelige beløb. Når noget er forkert eller simpelthen ikke er noget, der skal være, skal du først tjekke din egen kode og derefter rydde browserens cache og tjekke din egen kode igen.

Tolkning af HTML og CSS, browseren er næstenat lave fejl er et aksiom. Hvis der ikke er noget nødvendigt element, betyder det at i CSS konstruktionen {position: absolute; z-indeks: 112233; venstre: 10px; top: 20px; ...} noget mangler eller skrives forkert.

Den mest almindelige fejl er forkert angivet.elementets koordinater udeladt angivelse af dets synlighed, absolutte eller relative position. Nogle gange kan det virke at angive stilen direkte på elementet og ikke i sin stil. I sidstnævnte tilfælde er dette en vej ud af situationen, men dette indikerer først og fremmest en slags fejl i koden.

Stilen skal specificeres i klassen eller identifikatoren. Stilen skal kun angives på elementet i undtagelsestilfælde.

Brug af jQuery.css (z-indeks, 123) kan også føre til en fejl, hvis den anvendes til den forkerte klasse eller identifikator. Derudover er jQuery et rigtig godt udviklingsværktøj. Men inden du anvender det, gør det ikke ondt at tænke: er det muligt at gøre med improviserede midler til HTML / CSS, z-indeks er ikke en regel, der ikke har brug for nøje opmærksomhed.

Korrekt lag og logisk bevægelse

Den perfekte side er flad. Under alle omstændigheder er det langt fra et reelt volumetrisk billede på masseskala, og der er ikke noget særligt behov for det. Moderne hjemmesider er ægte praksis, rigtige opgaver. De skal bare arbejde, men de flade viser et tredimensionalt billede.

Forresten, fænomenet landingssider (landingside) i form af en "site building" version - den bedste bekræftelse på, at flade rektangulære former og tørt, men ekstremt klart indhold er også gode og praktiske. Men det skal bemærkes, at de monopolistiske selskabers sites har forblevet sammen med deres: det vigtigste er virksomhedens ansigt, dets funktionalitet og produktionskapacitet. Monstre af informationsteknologi vurderede, at destinationssiderne er over for små virksomheder, tilbehør, Herbalife og andre "smykker".

Ligesom det eller ej, som en kendsgerning,vil vise fremtiden. Det er vigtigt, at i en hvilken som helst variant af opbygningen af ​​hjemmesiden er det fornuftigt ikke kun at male indholdet i lag, men også for at sikre den korrekte bevægelse mellem dem.

En fremragende løsning er AJAX (siden opdateres efter behov). En endnu mere lovende løsning er, når siden viser, hvad der er nødvendigt på et givet tidspunkt i browservinduet.

Faktisk er z-indekset en simpel CSS-regel. Dens formål er at vise tagniveauet, så browseren kan bestemme, hvornår elementet skal vises, og hvilken del af elementet der vil blive synlig. Laget og siden er meget relative begreber, fordi det er problematisk at designe en side og huske værdierne af z-indeksreglen for forskellige indholdsvisningsmuligheder.

Normalt vælger udvikleren et yndlingsnummer og giverdens alle tags i en række, og dem, der på en eller anden måde skal skille sig ud, tildeler følgende nummer. At lægge vægt på lagene og niveauerne på siden er ikke en særlig progressiv og lovende praksis.

Men hvis du overfører z-indeks semantikken tildialog med den besøgende, kan du skabe en praktisk effekt. På samme måde som tags kan overlappe, kan du overlay dialoger (besøgende) og flytte mellem dem. Fra dette synspunkt er brugen af ​​z-indeks-CSS-reglen meget rimelig og praktisk.