Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Haaste: Hallitse Z-indeksiä ja Päällekkäisiä Elementtejä | CSS-sijoittelun Hallinta
Edistyneet CSS-tekniikat

bookHaaste: Hallitse Z-indeksiä ja Päällekkäisiä Elementtejä

Tehtävä

Luo visuaalisesti houkutteleva tausta verkkosivustolle käyttämällä viidestä eri kuvasta koostuvaa kuvitusta. Kaikki kuvat on sijoitettu oikein vanhemman div-elementin kehyksen sisälle. Tehtävänäsi on säätää päällekkäisyyden järjestystä käyttämällä z-index-ominaisuutta, jotta saat aikaan alla olevan kuvan mukaisen näkymän:

index.html

index.html

index.css

index.css

copy

Muuta kuvien pinoutumisjärjestystä vanhemman div-elementin sisällä käyttämällä z-index-ominaisuutta. Suurempi z-index-arvo, kuten 1, nostaa elementin muiden yläpuolelle pinoutumiskontekstissa, jolloin se näkyy etualalla.

index.html

index.html

index.css

index.css

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 11

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookHaaste: Hallitse Z-indeksiä ja Päällekkäisiä Elementtejä

Pyyhkäise näyttääksesi valikon

Tehtävä

Luo visuaalisesti houkutteleva tausta verkkosivustolle käyttämällä viidestä eri kuvasta koostuvaa kuvitusta. Kaikki kuvat on sijoitettu oikein vanhemman div-elementin kehyksen sisälle. Tehtävänäsi on säätää päällekkäisyyden järjestystä käyttämällä z-index-ominaisuutta, jotta saat aikaan alla olevan kuvan mukaisen näkymän:

index.html

index.html

index.css

index.css

copy

Muuta kuvien pinoutumisjärjestystä vanhemman div-elementin sisällä käyttämällä z-index-ominaisuutta. Suurempi z-index-arvo, kuten 1, nostaa elementin muiden yläpuolelle pinoutumiskontekstissa, jolloin se näkyy etualalla.

index.html

index.html

index.css

index.css

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 11
some-alt