Maksimal z-indeks. Z-indeks-egenskapen kan settes til negative verdier. Naturlig arrangement av elementer

Problemet med z-index er at mange mennesker rett og slett ikke forstår hvordan det fungerer.
Alt beskrevet nedenfor er i W3C-spesifikasjonen. Dessverre er det ikke alle som leser den.

Beskrivelse av problemet:

Så la oss si at vi har en HTML-kode som består av 3 elementer.
Hver av dem inneholder en i seg selv. Og hver på sin side har sin egen bakgrunn: henholdsvis rød, grønn og blå. I tillegg er alle plassert helt til venstre øverste kant dokumentet på en slik måte at det litt overlapper det neste. Den første har en z-indeks lik 1, de to andre har ingen z-indeks satt.

Nedenfor er HTML-koden med grunnleggende CSS-design.

.rød, .grønn, .blå ( posisjon: absolutt; ) .rød ( bakgrunn: rød; z-indeks: 1; ) .grønn ( bakgrunn: grønn; ) .blå ( bakgrunn: blå; )
Eksempel på jsfiddle

Oppgave: sørg for at rødt er bak blått og grønt, uten å bryte noen av følgende regler:

• Du kan ikke endre HTML-oppmerking
• Du kan ikke endre/legge til z-indeks til elementer
• Du kan ikke endre/legge til posisjonering til elementer

Løsning:

Løsningen er å legge til litt mindre enn én transparent til den første (forelderen til rød).
Her er css som illustrerer dette:
div:førstebarn ( opasitet: .99; )

Hmm, noe er galt her. Hva har åpenhet med det å gjøre? Hvordan kan det påvirke rekkefølgen av overlappende elementer? Tenker du det samme? Velkommen til klubben!
Jeg håper at i den andre delen av artikkelen vil alt falle på plass.

Rekkefølgen på overliggende elementer:

Z-indeks virker veldig enkel: jo høyere verdi, desto nærmere vil elementet være oss, dvs. et element med z-indeks 5 vil overlappe et element med z-indeks 2, ikke sant? Ikke egentlig.
Dette er z-indeksproblemet. Det hele virker så åpenbart at de fleste utviklere ikke bruker nok tid på å studere dette problemet.

Ethvert element i HTML-dokument kan være enten i forgrunnen eller i bakgrunnen. Alle vet dette. Reglene som definerer denne rekkefølgen er tydelig beskrevet i spesifikasjonen, men, som jeg sa ovenfor, forstår ikke alle dem fullt ut.

Hvis z-indeksen og posisjoneringsegenskapene ikke er angitt eksplisitt, er alt enkelt: stablingsrekkefølgen er lik rekkefølgen til elementene i HTML. (Det er faktisk litt mer komplisert enn det, men så lenge du ikke bruker negative utfyllingsverdier for å overlappe innebygde elementer, vil du ikke støte på kantsaker)

Hvis du eksplisitt spesifiserer posisjonering for elementer (og deres barn), vil slike elementer overlappe elementer uten eksplisitt gitt eiendom posisjonering. (Når jeg sier "eksplisitt angi posisjonering", mener jeg enhver annen verdi enn statisk, for eksempel: absolutt eller relativ).

Og til slutt, tilfellet der z-indeksen er gitt. Til å begynne med er det naturlig å anta at elementer med en stor z-indeks vil være over elementer med en mindre z-indeks, og ethvert element med et z-indeks sett vil være over et element uten et z-indeks sett, men dette er ikke tilfelle. For det første tas z-indeksen kun i betraktning på eksplisitt posisjonerte elementer. Hvis du prøver å sette z-indeksen på et ikke-posisjonert element, vil ingenting skje. For det andre kan z-indeksverdier skape overleggskontekster. Hmm, ting ble mye mer komplisert, gjorde de ikke?

Overlegg kontekst

Elementer med felles foreldre som beveger seg til forgrunnen eller bakgrunnen sammen er kjent som overleggskonteksten. Å forstå stablingskonteksten er nøkkelen til å forstå z-indeksen og stablingsrekkefølgen til elementer.

Hver overleggskontekst har sitt eget rotelement ved HTML-struktur. I det øyeblikket en ny kontekst dannes på et element, faller også alle underordnede elementer inn i denne konteksten og tar sin plass i overleggsrekkefølgen. Hvis et element er plassert helt nederst i en overleggskontekst, er det ingen måte i helvete at det kan vises over et annet element i en tilstøtende overleggskontekst høyere opp i hierarkiet, selv med en z-indeks satt til en million.

En ny kontekst kan dannes i følgende tilfeller:

• Hvis elementet er rotelementet til dokumentet (element)
  Hvis elementet ikke er statisk plassert og dets z-indeksverdi ikke er auto
  Hvis elementet har opasitet mindre enn 1

Fra forfatteren: velkommen til serien vår CSS leksjoner fra A til Å! I denne serien vil jeg fortelle deg om CSS-verdier og egenskaper som starter med forskjellige bokstaver i alfabetet. Noen ganger er ikke en opplæringsvideo nok, og i denne artikkelen skal jeg gi deg et par raske tips om å jobbe med z-indeks-egenskapen.

Den fullstendige videoopplæringen og dens tekstversjon på z-index-egenskapen kan sees på lenken.

Z står for z-indeks

Som du kanskje forventer, vil den siste artikkelen i serien i sin helhet være viet z-index-egenskapen.

Som nevnt i videoopplæringen, kontrollerer z-index-egenskapen rekkefølgen på lagene i et dokument. Det er flere komplekse problemer knyttet til stabelkonteksten, som ble diskutert i videoopplæringen, men generelt har z-index-egenskapen ganske begrenset funksjonalitet.

z-index fungerer kun på posisjonerte elementer

Hvis du trenger å endre rekkefølgen på lag på elementer, kan du gjøre dette ved å bruke z-index-egenskapen. derimot denne eiendommen vil bare fungere med elementer som har posisjonsegenskapen satt til absolutt, relativ eller fast.

Nøyaktig plassering av elementer er avgjørende når du lager komplekse oppsett og interessante grensesnittmønstre, men vi ønsker alle å kunne endre rekkefølgen på lagene uten å måtte flytte et element fra sin opprinnelige posisjon på siden.

Hvis du bare trenger å endre rekkefølgen på lagene, kan du ganske enkelt sette egenskapen posisjon til relativ og utelate toppen, høyre, bunn eller venstre. Elementet forblir på sin plass, strukturen til dokumentet vil ikke bli forstyrret, og z-index-egenskapen vil fungere som den skal.

Du kan spesifisere negative verdier i z-indeks-egenskapen

Lag brukes ofte til å lage komplekse geometriske former eller UI-komponenter. Denne lagdelingen innebærer arrangement av elementer over hverandre med konstant økning z-indeksverdier. For å flytte et element ned et nivå, spesifiser du ganske enkelt en lavere z-indeksverdi, men denne egenskapen godtar også negative verdier.

Negative verdier kan brukes med pseudo-elementer for å plassere dem bak det overordnede elementets innhold.

For å plassere :before eller after pseudo-elementene under det overordnede elementets tekst, må du spesifisere en negativ verdi. Slik fungerer stabelen.

Ta en titt på CodePen-demoen nedenfor for å leke med forskjellige betydninger z-indeks.

Bruk 100 som inkrement for z-indeks

Når du arbeider med z-index, er det ikke vanlig å skrive kode slik:

Modal (z-indeks: 99999; )

Modal ( z-indeks: 99999;

Det gjør meg vondt å se på denne koden. Ting blir enda verre når du legger til!viktig. Kode som dette er et tegn på at utvikleren ikke forstår konteksten til stabelen og prøver å tvinge ett lag oppå et annet.

I stedet for å bruke vilkårlige tall som 9999, 53 eller 12, kan vi systematisere z-indeksskalaen vår og sette den i rekkefølge. Og det er ikke fordi jeg er en utvikler med tvangslidelser. Ærlig talt.

Som en økning for z-indeks bruker jeg ikke et enkeltsifret tall, men 100.

Lag-ett (z-indeks: 100;).lag-to (z-indeks: 200;).lag-tre (z-indeks: 300;)

Denne manuelle tilnærmingen til å lage et z-indekssystem er veldig robust, men den kan bli enda mer fleksibel når den kobles sammen med en forprosessor som Sass. Det er det, venner. Dette var den siste artikkelen i CSS A til Å-serien! Vi håper du likte det og lærte mye om CSS-egenskaper.

Flertall CSS-egenskaper enkelt å forstå. Ofte gir det umiddelbare resultater å bruke noen av dem på et markup-element - du trenger bare å oppdatere siden, og du kan se effekten av applikasjonen. Imidlertid er det noen egenskaper som er mer komplekse og vil bare fungere under visse omstendigheter.

Z-indeks-egenskapen tilhører den andre gruppen, som utvilsomt forårsaker mer forvirring enn noen annen. Ironisk nok, men med en full forståelse av hva z-index er, er det veldig enkelt å bruke og er det ofte effektiv måte overvinne mange layoutproblemer.

I denne artikkelen vil vi se på hva z-index er, hvilke problemer det er med å forstå den, og også diskutere noen eksempler på bruken. Vi vil også vurdere forskjellen i hvordan nettlesere behandler det, spesielt i tidligere versjoner Internet Explorer og FireFox.

Så hva er denne eiendommen?

z-index-egenskapen bestemmer nivået på plassering i stabelen, dybden til html-elementet. "Dybdenivå" betyr posisjonen til elementet langs Z-aksen (som vinkelrett på X- og Y-aksene til skjermen). Jo høyere z-indeksverdien er, jo høyere blir elementet.

Naturlig arrangement av elementer

På en side bestemmes normal plassering av elementer (som jeg mener langs Z-aksen) av flere faktorer. Nedenfor er en liste over disse faktorene, som starter med de laveste elementene. Denne listen forutsetter at ingen elementer er eksplisitt tildelt en z-indeks-egenskap.

1. Bakgrunnen og kantene til elementet som definerer stabelkonteksten.
2. Elementer med negativ stabelkontekst, i visningsrekkefølge.
3. Ikke-posisjonert (posisjon: statisk), så vel som uten float-egenskapssettet (float: ingen) blokkelementer(visning: blokk), i visningsrekkefølge.
4. Uposisjonerte blokkelementer med flytende egenskaper, i visningsrekkefølge.
5. Innebygde elementer, i visningsrekkefølge.
6. Elementer med posisjonsegenskapen satt, i visningsrekkefølge.

Riktig bruk av z-indeks-egenskapen kan endre den naturlige stabelposisjonen.

Selvfølgelig er rekkefølgen på elementene i en stabel ikke åpenbar før du må vise elementene over hverandre. Derfor, for å se den normale rekkefølgen av elementer, bruker eksempelet nedenfor negative marginer.

Disse elementene forskjellige farger bakgrunn og kantlinjer, og de to siste er forskjøvet på grunn av den angitte negative marginegenskaper. På denne måten kan du se den naturlige plasseringen av elementer, hver neste er "over" den forrige. Disse elementene har ikke et z-indeks-egenskapssett, og stablingsrekkefølgen deres er naturlig.

Hvor kan problemene være?

La oss se på det mest populære problemet blant nybegynnere. Saken er at z-index-egenskapen bare fungerer på elementer som har sin posisjonsegenskap satt til absolutt , fixed eller relativ .

For å demonstrere dette, la oss vise de samme tre elementene, men med z-indeks-egenskapen satt for å prøve å endre rekkefølgen langs Z-aksen.

La oss sette det grå elementets z-indeks til 9999, det blå elementet til 500 og det brune elementet til 1. Det er logisk å forvente at rekkefølgen endres. Men ikke i dette tilfellet, siden posisjonsegenskapen er statisk som standard.

La oss sette posisjonsegenskapen til relativ og se hva som skjer:

Men nå har vi forventet resultat. Rekkefølgen på elementene er endret, det grå elementet er på toppen av alle, og det brune er helt nederst.

Syntaks

z-indeks-egenskapen påvirker både blokkelementer og innebygde elementer. Verdien kan være positiv eller et negativt tall, eller standardverdien er auto. Standardverdien betyr at elementet er på samme nivå som det overordnede.

Nedenfor er CSS for det tredje eksemplet, der z-index-egenskapen brukes riktig:

#grey_box ( bredde: 200px; høyde: 200px; kantlinje: solid 1px #ccc; bakgrunn: #ddd; posisjon: relativ; z-indeks: 9999; ) #blue_box (bredde: 200px; høyde: 200px; kantlinje: solid 1px # 4a7497; bakgrunn: #8daac3 posisjon: relativ ) #gullboks (bredde: 200px; kant: solid 1px;

Nok en gang, spesielt for de nye til CSS, vil ikke z-index-egenskapen fungere med mindre du angir posisjonsegenskapen.

Bruk i javascript

Du kan påvirke z-index-egenskapen dynamisk ved å bruke javaScript. Syntaksen ligner på de fleste CSS-egenskaper, og bruker kamelnotasjon for å erstatte bindestreken i CSS-egenskaper.

Var myElement = document.getElementById("gold_box"); myElement.style.position = "relativ"; myElement.style.zIndex = "9999";

Feil implementering i IE og FireFox

I noen tilfeller, i IE6, IE7 og FireFox 2, er det en feil implementering av z-index-egenskapen.

Velg element i IE6

I Internet Explorer 6 er select-elementet en Windows-kontroll, av denne grunn vises det alltid på toppen av alle elementene, og ignorerer den normale plasseringsrekkefølgen, samt egenskapene for posisjon og z-indeks. Problemet er vist på bildet nedenfor:

Select-elementet er det første elementet i dokumentet, dets z-index-egenskap er satt til 1, og dets posisjon er satt til relativ . Div-en vises etter valget og z-indeksen er "9999". Basert på alt dette bør div-en være plassert over select , slik det skjer i andre nettlesere:

Velg år - 2009 2010 2011

Hvis du ikke ser denne artikkelen i IE6, vil du se at div-en er plassert over den valgte .

Denne IE6-feilen er stort problem for rullegardinmenyer, når de skal overlappe det valgte elementet. Løsningen kan være bruker javascript for å midlertidig skjule valgene, og deretter, etter at menyen forsvinner, vis den igjen. En annen løsning kan være å bruke en iframe.

Posisjonerte foreldre i IE6/IE7

Internett Explorer-versjoner 6 og 7 tilbakestiller stabelkonteksten feil i forhold til den nærmeste overordnede. For å demonstrere denne feilen vil vi igjen vise to divs. Men denne gangen pakker vi den første inn i et plassert element.

Det grå elementet har en z-indeks på 9999, det blå elementet har en z-indeks på 1, begge elementene er plassert. Derfor, hvis implementert riktig, vil det grå elementet vises på toppen av det blå.

Hvis du åpner denne siden i IE6 eller IE7, vil du se at det blå elementet overlapper det grå. Dette skjer fordi det grå elementet er pakket inn i en annen div hvis posisjon er satt til relativ .

Begge nettleserne "tilbakestiller" stabelkontekst på relativt plasserte elementer, selv om de ikke burde. Det grå elementet har en høyere z-indeks enn det blå elementet, så det skal vises høyere. Det er ikke noe slikt problem med andre nettlesere.

Negative verdier i FireFox 2

I FireFox 2 er elementer med negativ z-indeks under stablekonteksten, i stedet for å være over bakgrunnen og grensene til elementet som danner stablekonteksten. Du kan se et eksempel på bildet:

Nedenfor er html-versjonen

Som du kan se, er bakgrunnen til det grå elementet (som danner stabelkonteksten) under det blå, og teksten (som er det innebygde elementet i det grå elementet) er over det, etter de naturlige layoutreglene beskrevet ovenfor.

Eksempler på bruk

Den originale artikkelen gir mange eksempler på bruk av eiendommen. Ærlig talt, jeg er for lat til å oversette dette, i utgangspunktet er det et skjermbilde, en liten kommentar og en lenke. Hvis du virkelig trenger det, så skriv, jeg skal få tid til det.

Den rosa firkanten har en annen z-indeksverdi enn auto, som skaper en ny overleggskontekst. Utseendet til en overleggskontekst påvirker hvordan underordnede elementer gjengis.

Du kan endre stablerekkefølgen til den rosa firkantens barn. Imidlertid deres z-indeks gir bare mening i sammenheng med et overlegg. Dette betyr at vi ikke vil kunne plassere den oransje firkanten foran den blå fordi de er i forskjellige overleggskontekster.

Hvis vi vil at de blå og oransje rutene skal være en del av den samme overleggskonteksten, kan vi gjøre den blå firkanten til et barn av den rosa firkanten. Dette vil flytte den blå firkanten bak den oransje.

https://codepen.io/ivhed/pen/erGoJE

Overleggskonteksten opprettes ikke bare ved å bruke z-index-egenskapen. Det er flere andre egenskaper som får elementer til å lage overleggskontekster. Noen eksempler: filter, opasitet og transformasjon.

La oss gå tilbake til vårt forrige eksempel. Den blå firkanten er igjen koblet til den rosa. Denne gangen, i stedet for å legge til en z-indeks-egenskap til den rosa firkanten, bruker vi et filter på den.

Blå, .rosa, .orange (
posisjon: absolutt;
).rosa (
filter: hue-rotate(20deg);
) .blå (
z-indeks: 2;
) .oransje (
z-indeks: 3;
) .grønn (
z-indeks: 100;
}

https://codepen.io/ivhed/pen/LmWMQb

Den oransje firkanten har fortsatt mer høy z-score enn blå, men vises fortsatt bak den. Dette er fordi filterverdien fikk den rosa firkanten til å opprette en ny overleggskontekst.

Sammendrag

Ved å bruke z-indeksen på posisjonerte elementer, kan vi endre standard stablingsrekkefølge for elementer.

Når visse CSS-egenskaper brukes, kan et element danne en overleggskontekst. Z-indeksverdier er bare meningsfulle i samme overleggskontekst.

For å få tilleggsinformasjon om hvordan z-index-egenskapen fungerer, anbefaler jeg at du leser denne artikkelen. Det var hun som inspirerte meg mens jeg jobbet med denne publikasjonen.

Denne artikkelen vil snakke om hvordan du kan bringe et lag eller element inn i forgrunnen/bakgrunnen i HTML ved hjelp av CSS. Mer presist, ved å bruke z-indeks-egenskapen.

Mest sannsynlig laget hver av dere applikasjoner som barn. Dette er en prosess hvor du limer ulike elementer på toppen av et stykke papir – hus, trær, skyer, og så videre. Det viser seg noe sånt som et 3D-bilde, der hvert element, så bare et lag, limes oppå det andre. Alle er limt på et papirark.

HTML med bruker CSS lar deg få et lignende bilde, bare på en nettside. Hvert av elementene kan limes oppå de andre om nødvendig.

Når kan dette være nødvendig? Hvis du liker å leke med posisjon og posisjon i forhold til skjermen, kan du ende opp med at ett element overlapper et annet, men du må bringe det lukkede elementet foran. Ofte, uten å definere elementene i bakgrunnen/forgrunnen, er det vanskelig å implementere denne eller den tingen fra et design som ikke ble unnfanget av en programmerer, men av en designer. Generelt er omfanget av denne eiendommen veldig bredt og begrenses bare av fantasien din.

Det første du må huske er at z-indeks ikke fungerer med mindre elementet har en posisjonsegenskap satt til absolutt , relativ eller fast . Dette er tilfelle, siden du må overlappe, og derfor plassere dem på forskjellige lagnivåer, bare hvis du begynner å overlappe ett element med et annet på grunn av posisjon og bunn , topp , venstre , høyre . Men dette er ikke det eneste tilfellet hvor z-indeksplassering kan være nødvendig. Elementer kan overlappe hverandre ved å bruke negative marginverdier og andre metoder.

Hvis du ikke spesifiserer z-indeks, er den standard til 0 for alle elementer. z-indeks kan ta både positive og negative heltallsverdier. Når det gjelder standardverdien, vil elementene overlappe hverandre i henhold til jo lenger elementet er skrevet i koden, jo mer vil det være forgrunnen(Eksempel nr. 1 i Demo).

Slik kan CSS-stilkoden for 3 se ut: