Share
De z-indeks eiendom i CSS virker enkelt nok, men det er mye å oppdage under overflaten hvis du virkelig vil forstå hvordan det fungerer. I denne opplæringen vil vi tydeliggjøre Z-indeksens indre arbeid ved å se på stabling sammenhenger og noen få praktiske eksempler.
CSS gir tre forskjellige posisjoneringsordninger for utformingen av bokser:
Den siste fjerner helt et element fra den normale strømmen og bygger på utvikleren for å fortelle elementet hvor det skal vises.
Du gir den øverste, venstre, nederste og høyre verdien for å plassere elementet i todimensjonalt mellomrom, men CSS lar deg også plassere det i den tredje dimensjonen ved hjelp av z-indeksegenskapen.
På overflaten ser z-indeks ut som en enkel eiendom å bruke. Du angir verdier for å bestemme hvor på elementet som ligger på denne tredje aksen, og du er ferdig. Under overflaten er det mye mer å dykke inn, inkludert en rekke regler for hvilke typer elementer som sitter på toppen av andre.
La oss starte med det grunnleggende for å være sikker på at vi er alle på samme side, og så snakker vi om stabling for å forstå mer av hva som skjer med z-indeks bak kulissene.
Jeg er sikker på at du er kjent med tredimensjonal koordinasjonsplass. Vi har en x-akse som vanligvis brukes til å representere den horisontale, en y-akse som representerer vertikal, og en z-akse brukes til å representere hva som skjer inn og ut av siden, eller skjermen i vårt tilfelle.
Vi gjør ikke bokstavelig talt se z-aksen, da skjermen er et todimensjonalt plan. Vi ser det i form av perspektiv og av enkelte elementer som kommer foran eller bak andre elementer når de deler det samme todimensjonale rommet.
For å fastslå hvor langs denne tredje aksen et element er plassert, tillater CSS oss å angi tre verdier på z-indeksegenskapen.
For øyeblikket la oss fokusere på heltallverdien. Dette kan være positivt, negativt eller 0. Jo større verdien, jo nærmere betrakteren vises elementet. Jo lavere verdien, jo lenger unna vises det.
Hvis to elementer er plassert slik at de begge opptar et delt område av todimensjonalt rom, vil elementet med den større z-indeksen skjule eller okkludere elementet med den nedre z-indeksen i områdene hvor de deler plassen.
Jeg antar at ovennevnte er lett nok til å forstå og sannsynligvis oppfører seg akkurat som du forventer. Det er imidlertid noen ubesvarte spørsmål som henger rundt.
For å svare på disse spørsmålene må vi forstå mer om hvordan z-indeksen fungerer, spesielt ideen om stabling av sammenhenger, stablingsnivåer og stabling av ordrer.
Stacking sammenhenger og stabling nivåer kan være litt vanskelig å konseptualisere, så for et øyeblikk, bilde et bord med en haug med elementer sitter på toppen av det. Tabellen representerer en stablingskontekst. Hvis det er et annet bord ved siden av det første, representerer det en annen stablingskontekst.
Forestill deg nå på den første bordet, er det fire små blokker, alle sitter direkte på bordet. På toppen av disse fire blokkene er en tallerken med glass og på toppen av glassplaten er en bolle med frukt. Blokkene, glassplaten og fruktskålen representerer hverandre et annet stablingsnivå innenfor stablingskonteksten som er tabellen.
En enkelt standard stabling kontekst er opprettet for hver nettside. Roten til denne konteksten (tabellen) er html element. Alt inne i html-taggen sitter på et stablingsnivå i denne standard stablingskonteksten (objekter som sitter på bordet).
Når du tilordner en z-indeksverdi annet enn auto til et element, oppretter du en ny stablingskontekst med nye stablingsnivåer som er uavhengige av andre stablingskontekster og stablingsnivåer på siden. Du tar med deg et annet bord inn i rommet for gjenstander å sitte på.
Den enkleste måten å forstå stablingsordren er med et enkelt eksempel, så enkelt vil vi ikke engang vurdere posisjonerte elementer for et øyeblikk.
Tenk på en veldig enkel nettside. Annet enn standard Hva forventer du å se når du laster inn siden? Forhåpentligvis tok det deg ikke lang tid til å bilde et stort sett blått skjerm med unntak av en blokk med rød farge som har dimensjonene du angir for bredden og høyden på div. Den røde blokken er sannsynligvis øverst til venstre på siden, med mindre du lar fantasien løpe vilt litt og ga det mer css å vise det et annet sted. Du kan tenke "så hva, det var ganske tydelig", men det som kanskje ikke er så opplagt, er hvorfor du ser en rød blokk på toppen av en blå bakgrunn. Hvorfor ser du diven på toppen av html-elementet? Årsaken er at begge har følgende stablingsordre. Når det gjelder dette enkle eksempelet, sier reglene at etterkommende blokker i normalflyten (div) sitter på et høyere nivå enn bakgrunnen og grensen til rotelementet (html-elementet). Du ser div på toppen fordi den er på et høyere stablingsnivå. Mens eksemplet ovenfor bare inneholder en to-nivå stabel, er det syv mulige nivåer på hver stablingskontekst, som er oppført nedenfor. Disse syv nivåene danner regler for stablingsordre. Et element på nivå sju vil vise over (nærmere seeren) enn elementer på nivå 1 til 6. Et element på nivå fem viser over et element på nivå to. Et element på ... vel, du får ideen. Første gang jeg støttet regleringsordningene ovenfor, stod noen ting ut for meg. Hvis du bare ser på nivåene to, seks og syv (de der z-indeksen er nevnt), passer den til det du sannsynligvis antar om z-indeksen. Positiv z-indeks er på et høyere nivå enn 0 z-indeksen, som er på et høyere nivå enn negativ z-indeks. Det er sannsynligvis der de fleste av oss slutter å tenke på alle disse stablingslagene, skjønt. Før disse reglene hadde jeg antatt alt annet var ekvivalent med en z-indeks på 0. Klart det er ikke så. Faktisk sitter det meste på et nivå under z-indeksen = 0 nivå. Det som også er interessant er at ikke-posisjonerte elementer ligger på fire forskjellige stablingsnivåer. Det er fornuftig når du tenker på det. Hvis alle ikke-posisjonerte elementene var på samme stablingsnivå, ville vi ikke se tekst (inline-boks) på toppen av en div (blokknivå-boks). Et par ganger har jeg nevnt å skape nye stablingskontekster. Når du tilordner en z-indeksverdi annet enn La oss tenke igjen på tabeller som stablingskontekster. Før hadde vi et bord og på toppen av bordet var fire blokker, en tallerken med glass og en fruktskål. Tenk deg at det andre bordet vi introduserte også har fire blokker av samme størrelse og en tallerken glass på toppen, men ingen fruktskål. Du forventer at fruktskålen fra tabell 1 blir den høyeste gjenstanden i rommet. Den sitter på høyeste nivå (den har den største z-indeksen). Hva ville skje om vi flyttet bord ett og alt på toppen av det til kjelleren? Denne fruktskålen ville nå være lavere enn alt på bord to, fordi bordet selv har blitt flyttet til et nivå under tabell to. Det samme skjer med plasserte elementer på en nettside. Vurder merkingen og stylingen nedenfor. Vil HTML: CSS: Selv om div.two har den større z-indeksen (100), sitter den faktisk under div.four (z-index = 50) på siden. Du kan se resultatet av koden ovenfor i bildet nedenfor. De svarte og gule grensene viser de forskjellige stablingskontekstene hvert element er i. Siden div.two er inneholdt i div.one, er z-indeksen relativ til Det vi har gjort er flyttet Hvis du er som meg, har dette sannsynligvis trukket deg opp en eller to ganger når du arbeider med z-indeksen. Forhåpentligvis hjelper disse eksemplene til å klare hvorfor et element med en større z-indeks noen ganger ender med å vise bak et annet element med en lavere z-indeks. Når du først møter det, ser z-indeksegenskapen ut som en veldig enkel egenskap å forstå. Verdier representerer et sted på en akse inn og ut av skjermen, og det er alt. Et dypere kikk på z-indeksen viser at det er litt mer på gang bak scenene. Det er stabling av sammenhenger, stablingsnivåer og regler for å bestemme hvilket element som vises høyere eller lavere i stablingsordren. Posisjonerte elementer kan skape nye stablingskontekster, og hele stablingsnivået vil vise over eller under alle nivåene i en annen stablingskontekst., , , etc. du finner på hver nettside er det en enkelt
De syv nivåene i en stablingskontekst
Sette alt sammen
auto til et element du lager en ny stablingskontekst, uavhengig av andre stablingskontekster.div.two Vis over eller under div.four?div bredde: 200px; høyde: 200px; polstring: 20px; .one, .two,. tre, .four posisjon: absolutt; .on bakgrunn: # f00; omriss: 5px solid # 000; topp: 100px; venstre: 200px; z-indeks: 10; .two bakgrunn: # 0f0; omriss: 5px solid # 000; topp: 50px; venstre: 75px; z-indeks: 100; .three bakgrunn: # 0ff; omriss: 5px solid # 000; topp: 125px; venstre: 25px; z-indeks: 150; .four bakgrunn: # 00f; omriss: 5px solid # ff0; topp: 200px; igjen: 350px; z-indeks: 50;
div.ones bunke. I virkeligheten er det som vi egentlig har:
div.one og alt det inneholder nedenfor div.four. Uansett hvilke verdier vi satte på z-indeksegenskapen til elementer inni div.one de vil alltid vise nedenfor div.four.
Konklusjon
Videre lesning
Accentsconagua