Hantering 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.css
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 ihtml
-filen.
Tack för dina kommentarer!
Fråga AI
Fråga AI
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
Hantering 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.css
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 ihtml
-filen.
Tack för dina kommentarer!