Hå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.css
Merk
Hvis vi setter samme verdi for
z-index
-egenskapen på ulike elementer, vil nettleseren vise elementene i den rekkefølgen de står ihtml
-filen.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
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
Hå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.css
Merk
Hvis vi setter samme verdi for
z-index
-egenskapen på ulike elementer, vil nettleseren vise elementene i den rekkefølgen de står ihtml
-filen.
Takk for tilbakemeldingene dine!