Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Udfordring: Kontrol af Z-indeks og Overlappende Element | Mastering CSS-positionering
Avancerede CSS-teknikker

bookUdfordring: Kontrol af Z-indeks og Overlappende Element

Opgave

Opret en visuelt tiltalende baggrund til hjemmesiden ved hjælp af en illustration sammensat af 5 forskellige billeder. Alle billeder er korrekt placeret inden for rammen af det overordnede div-element. Din opgave er at justere stablingsrækkefølgen ved hjælp af z-index-egenskaben for at opnå det ønskede udseende, som vist på billedet nedenfor:

index.html

index.html

index.css

index.css

copy

For at ændre stableordenen for billederne inden for det overordnede div-element, anvendes egenskaben z-index. En højere z-index-værdi, såsom 1, placerer elementet over andre i stablekonteksten og gør det synligt i forgrunden.

index.html

index.html

index.css

index.css

copy

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 11

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.04

bookUdfordring: Kontrol af Z-indeks og Overlappende Element

Stryg for at vise menuen

Opgave

Opret en visuelt tiltalende baggrund til hjemmesiden ved hjælp af en illustration sammensat af 5 forskellige billeder. Alle billeder er korrekt placeret inden for rammen af det overordnede div-element. Din opgave er at justere stablingsrækkefølgen ved hjælp af z-index-egenskaben for at opnå det ønskede udseende, som vist på billedet nedenfor:

index.html

index.html

index.css

index.css

copy

For at ændre stableordenen for billederne inden for det overordnede div-element, anvendes egenskaben z-index. En højere z-index-værdi, såsom 1, placerer elementet over andre i stablekonteksten og gør det synligt i forgrunden.

index.html

index.html

index.css

index.css

copy

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 11
some-alt