Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Håndtering av Stablerekkefølgen til Elementer | Mastering CSS-posisjonering
Avanserte CSS-teknikker

bookHåndtering av Stablerekkefølgen til Elementer

Egenskapen z-index bestemmer stablingsrekkefølgen til posisjonerte elementer på en nettside. Den gjelder kun for posisjonerte elementer, det vil si elementer med en posisjonsverdi av absolute, fixed, relative eller sticky. Siden disse elementene tas ut av det normale dokumentflyten, må vi angi z-index for å avgjøre hvilke av de posisjonerte elementene som skal vises høyere eller lavere.

z-index: number_without_units

Jo høyere verdi z-index-egenskapen har, desto høyere vises elementet på brukerskjermen.

La oss øve. Vi har fire div-elementer med klassen box, hver stylet som et kvadrat og nummerert for å representere rekkefølgen i html-dokumentet. Kvadratene er for øyeblikket plassert oppå hverandre. Oppgaven er å justere z-index-egenskapen med riktige verdier for å få kvadrat 3 fremst og sende kvadrat 4 bakerst.

index.html

index.html

index.css

index.css

copy

Merk

Hvis vi setter samme verdi for z-index-egenskapen på ulike elementer, vil nettleseren vise elementene i den rekkefølgen de står i html-filen.

question mark

Hva er formålet med z-index-egenskapen?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 10

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.04

bookHåndtering av Stablerekkefølgen til Elementer

Sveip for å vise menyen

Egenskapen z-index bestemmer stablingsrekkefølgen til posisjonerte elementer på en nettside. Den gjelder kun for posisjonerte elementer, det vil si elementer med en posisjonsverdi av absolute, fixed, relative eller sticky. Siden disse elementene tas ut av det normale dokumentflyten, må vi angi z-index for å avgjøre hvilke av de posisjonerte elementene som skal vises høyere eller lavere.

z-index: number_without_units

Jo høyere verdi z-index-egenskapen har, desto høyere vises elementet på brukerskjermen.

La oss øve. Vi har fire div-elementer med klassen box, hver stylet som et kvadrat og nummerert for å representere rekkefølgen i html-dokumentet. Kvadratene er for øyeblikket plassert oppå hverandre. Oppgaven er å justere z-index-egenskapen med riktige verdier for å få kvadrat 3 fremst og sende kvadrat 4 bakerst.

index.html

index.html

index.css

index.css

copy

Merk

Hvis vi setter samme verdi for z-index-egenskapen på ulike elementer, vil nettleseren vise elementene i den rekkefølgen de står i html-filen.

question mark

Hva er formålet med z-index-egenskapen?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 10
some-alt