Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Hantering av Elementens Staplingsordning | Bemästra CSS-positionering
Avancerade CSS-tekniker

bookHantering av Elementens Staplingsordning

Egenskapen z-index bestämmer staplingsordningen för positionerade element på en webbsida. Den gäller endast för positionerade element, det vill säga element med position-värdet absolute, fixed, relative eller sticky. Eftersom dessa element tas ur det normala dokumentflödet, anger vi z-index för att bestämma vilka av dessa positionerade element som ska visas ovanför eller under varandra.

z-index: number_without_units

Ju högre värde egenskapen z-index har, desto högre visas elementet på användarens skärm.

Övning: Vi har fyra div-element med klassen box, där varje är utformat som en kvadrat och numrerad för att representera sin ordning i html-dokumentet. Kvadraterna är för närvarande placerade ovanpå varandra. Uppgiften är att justera egenskapen z-index med rätt värden för att föra kvadrat 3 längst fram och skicka kvadrat 4 längst bak.

index.html

index.html

index.css

index.css

copy

Observera

Om vi anger samma värde för egenskapen z-index till olika element, kommer webbläsaren att visa elementen i den ordning de förekommer i html-filen.

question mark

Vad är syftet med egenskapen z-index?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 10

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 2.04

bookHantering av Elementens Staplingsordning

Svep för att visa menyn

Egenskapen z-index bestämmer staplingsordningen för positionerade element på en webbsida. Den gäller endast för positionerade element, det vill säga element med position-värdet absolute, fixed, relative eller sticky. Eftersom dessa element tas ur det normala dokumentflödet, anger vi z-index för att bestämma vilka av dessa positionerade element som ska visas ovanför eller under varandra.

z-index: number_without_units

Ju högre värde egenskapen z-index har, desto högre visas elementet på användarens skärm.

Övning: Vi har fyra div-element med klassen box, där varje är utformat som en kvadrat och numrerad för att representera sin ordning i html-dokumentet. Kvadraterna är för närvarande placerade ovanpå varandra. Uppgiften är att justera egenskapen z-index med rätt värden för att föra kvadrat 3 längst fram och skicka kvadrat 4 längst bak.

index.html

index.html

index.css

index.css

copy

Observera

Om vi anger samma värde för egenskapen z-index till olika element, kommer webbläsaren att visa elementen i den ordning de förekommer i html-filen.

question mark

Vad är syftet med egenskapen z-index?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 10
some-alt