CSS z-indeks: en oversigt, egenskaber

Stilling CSS z-index - sideelement positioneringskoordinat Z: niveauet af visningselementet eller lag, hvori det er placeret. Tag, der har z-indeks større vil blive vist i fuldt omfang. Tags vises i den rækkefølge, de vises i den indkommende strøm og overlap. приоритет видимости. Z-indeks værdi bestemmer synligheden prioritet.

Vi skal hylde moderne browsere og algoritmer display elementer. Da de dage, hvor grafik og indfangede skærmbilleder dannede klipning problem synlige og usynlige dele af elementerne i programvinduet har synlige indhold skærmteknologi nået gode resultater. I et browservindue, er alle elementer vises korrekt, at brugeren kun ser, hvad der er specificeret design eller udvikler.

Den generelle regel: rækkefølgen og omfanget af

Den (side dannede server) sekventielt input stream læser browseren. Alle tags vises i overensstemmelse med CSS regler og kan overlappe hinanden.

Dette eksempel beskriver fire synlige del. Hvert successivt overlapper en tidligere. På steder, hvor de tags er krydsede, der er et spørgsmål om prioritering. Som en regel z-indeks CSS tags for alle disse ens og lig med 848, vil det være klart, at element, der går som følger. Alle, der kigger ud fra under hver af de næste element, tilsyneladende.

regel synlighed

Browsere overholde reglerne om synlighed kun "fair". For at komme op med en algoritme, der gør det muligt at analysere alle brutto indførelse og brug kun dem, der rent faktisk skærer hinanden, bortset fra de dele, som indtages af hvert efterfølgende element - er meget vanskelig.

I de fleste tilfælde er dette ikke nødvendigt. Moderne udstyr er meget hurtig, og bemærk gentegne element til det punkt, hvor den kan blokere det næste element, er meget problematisk.

Indflydelse på elementopstillingen

Er det tilstrækkeligt at den tredje tag scCSS3 øge z-indeks, og ved scCSS4 - for at reducere det, er det samlede billede ændret. Sekvensen af elementer i strømmen forbliver den samme:

• id= 'scCSS1'; div id = 'scCSS1';
• id= 'scCSS2'; div id = 'scCSS2';
• id= 'scCSS3'; div id = 'scCSS3';
• id= 'scCSS4'. div id = 'scCSS4'.

Det skal bemærkes, at det andet billede er faktisk fylder mere end det ser ud. Det tredje billede er det samme. Endvidere består af to dele (to æg) i en afstand fra hinanden.

Den faktiske størrelse af de regioner, der rykker den anden og tredje billeder er fremhævet med gult og gråt hhv.

Kombinationen af z-indeks til baggrundsfarve

Det skal bemærkes, at egenskaberne af CSS baggrund & z-index supplerer hinanden. Alle blok-niveau elementer, og alle andre, altid indtager et rektangulært område dannet af den maksimale højde og den maksimale bredde af indholdet.

Ved hjælp af billeder, kan du gøre nogen form felt element, men omkring ham der altid vil være et rektangel. Det er en kendsgerning, at det er vigtigt at tage hensyn til korrekt.

Du kan placere tekst på en sti valgt form, men hvis du ikke gør det, får indholdet til ethvert element i en rektangulær kasse, successivt, ved modtagelsen af input.

Brugsegenskaber CSS z-indeks i elementet, hvis baggrund-farveværdi er transparent (en slags gennemsigtighed), kan emulere enhver kredsløbselement. Selv om der i alle tilfælde i virkeligheden element er rektangulært.

Begivenheder og synlige elementer

På steder, hvor elementet er blokeret af et andet element, de begivenheder, det vil ikke fungere. Som en generel regel, hvis varen er ude af syne, han også er tilgængeligheden zone.

Hvis en udvikler ønsker at låse knappen eller menupunkt, kan det godt være placeret over låsning tag et andet mærke, måske en gennemsigtig (fx ved hjælp af reglen om CSS opacitet), men under alle omstændigheder, har en højere CSS z-indeks.

Siden hændelsen, fra brugeren synspunkt, kan opdeles i relevante og ikke har nogen, så det sidste (bevæge musen, trykke tilfældige knapper på tastaturet, timeren signal) kan bruges til i tilstrækkelig grad at ændre indholdet i browservinduet.

Et simpelt eksempel: en besøgende har flyttet musemarkøren på menupunktet, men har endnu ikke besluttet at gøre noget. Udvikleren kunne give en begivenhed for at spore flytning af dialogen til den ønskede punkt (klik - en besøgende beslutter) og vise en passende indhold. Regel CSS z-indeks er den bedst egnet til lejligheden.

Billedformat

Da billeder er en vigtig byggemateriale for ethvert websted (skønhed, modernitet, funktionalitet - er den sædvanlige norm af ting), er det af stor betydning for de billedformat valg.

I det store, kan du bruge alle de mange forskellige eksisterende formater, men i form af funktionalitet og effektivitet er helt rimeligt at begrænse * .png for statiske billeder og * .gif - for animerede billeder. Populære * .jpg er også godt, men det tillader ikke fleksibilitet til at manipulere udstillingsplads.

Browser bugs og udvikleren

Ikke så ofte er tilfældet, når CSS z-index ikke virker, men det sker. Betingelser for cascading style sheets altid arbejde, og mængden af stil fil ofte nå betydelige mængder. Når noget ikke vises, eller bare ikke har hvad der skal være, skal først tjekke din egen kode, så rydde browserens cache og teste din egen kode igen.

Tolkning HTML og CSS, browseren er næsten ikke lave fejl - det er et aksiom. Hvis det ønskede punkt ikke, så i udformningen af CSS {position: absolut; z-index: 112.233; venstre: 10px; top: 20px; } ... der mangler noget eller ikke registreret.

Den mest almindelige fejl - forkert Vist element mangler en henvisning til dens synlighed på en absolut eller relativ position. Nogle gange kan det virke at specificere den stil direkte på elementet og er ikke hans stil. I sidstnævnte tilfælde er det en vej ud, men det er først og fremmest tale om en form for fejl i koden.

Stil skal være i klassen eller id stil. Peger stil på elementet bør kun i undtagelsestilfælde.

Anvendelse jQuery.css (z-index, 123) kan også føre til en fejl, hvis ikke påføres klasse eller identifikator. Hertil kommer, jQuery - en virkelig bemærkelsesværdig udvikling værktøj. Men før du anvender det, ikke ondt at tænke: Er det muligt at give afkald improviseret betyder HTML / CSS, z-indeks - er ikke en regel, der ikke kræver øjeblikkelig opmærksomhed.

Korrekt bevægelse af de logiske lag, og

Perfekt side - flad. Under alle omstændigheder, før den egentlige tre-dimensionelle billede i langt massivt, og ikke i dette særlige behov. Moderne hjemmesider - det er en virkelig oplevelse, den virkelige verden opgaver. De skal blot fungere godt og vise en flad tredimensionelt billede.

Af den måde, fænomenet destinationssiden (destinationsside) i form af optioner "site bygning" - det bedste bevis på, at den flade rektangulære form og tørre, men yderst præcise indhold - også god og praktisk. Men det skal bemærkes, at de steder, hvor monopolselskaberne holdt sig til deres det vigtigste - over for selskabet, dets funktionalitet og elproduktion. Informationsteknologi Monsters følte, at destinationssider - det er små virksomheder står, tilbehør, Herbalife og andre "smykker".

Ligesom det eller ej, i virkeligheden korrekt, vil fremtiden vise. Det er vigtigt, at det ikke kun giver mening at male i lag indhold, men også for at sikre korrekt bevægelse mellem dem på ethvert variant af opbygningen af en hjemmeside.

Fremragende løsning - AJAX (side opdateres efter behov). Endnu mere lovende løsning, når siden viser, at det er nødvendigt på dette punkt i browservinduet.

Faktisk z-index - denne enkle regel CSS. Dens formål - at vise niveauet af tag, så browseren kan bestemme, hvornår displayet element, og som en del af dette element vil være synligt. Lag og siden - en meget relativt begreb, fordi det er problematisk at designe siden og huske defineret i Rule z-indeks for forskelligt indhold display.

Typisk en udvikler vælger en favorit nummer, og giver det til alle tags i træk, og det faktum, at vi er nødt til at en eller anden måde skiller sig ud, tildeler det næste nummer. Lægger vægt på lagene og niveauer af sider - er ikke særlig progressive og lovende praksis.

Men hvis flytte semantik z-indeks til en dialog med den besøgende, er det muligt at skabe en praktisk virkning. Svarende til, hvordan tags kan oven på hinanden, er det muligt at pålægge en dialog (sidebesøgendes) og udfører bevægelse mellem dem. Ud fra dette perspektiv, anvendelsen af reglerne i CSS z-indeks ser ud til at være meget realistisk og praktisk.