Haaste: Suhteellisen Sijoittelun Käyttäminen
Huomio
Jokainen haaste tässä kurssissa sisältää koodiesimerkin, joka koostuu
index.html
- jaindex.css
-tiedostoista. Koska kurssin painopiste on CSS:n oppimisessa, suositellaan haasteiden ratkaisemistaindex.css
-tiedostossa. Kun haaste on suoritettu, napsauta "Run Code" -painiketta nähdäksesi sivun livenä ja varmistaaksesi, että haaste on ratkaistu oikein.Lisäksi jokaisessa haasteessa on "Hint"- ja "Solution"-painikkeet. "Hint"-painiketta napsauttamalla saat vihjeitä nykyiseen tehtävään, kun taas "Solution"-painike näyttää oikean CSS-ratkaisun koodiesimerkin.
Tehtävä
- Lisää
relative
-asettelu toiselle elementille, jolla onitem
-luokan nimi. - Siirrä elementtiä
30px
alaspäin ja50px
vasemmalle.
index.html
index.css
- Siirrä alaspäin asettamalla positiivinen arvo
top
-ominaisuudelle. - Siirrä vasemmalle asettamalla negatiivinen arvo
left
-ominaisuudelle.
index.html
index.css
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
How do I select the second element with the `item` class in CSS?
Can you explain how `position: relative` works in this context?
What values should I use for the `top` and `left` properties to achieve the required movement?
Awesome!
Completion rate improved to 2.04
Haaste: Suhteellisen Sijoittelun Käyttäminen
Pyyhkäise näyttääksesi valikon
Huomio
Jokainen haaste tässä kurssissa sisältää koodiesimerkin, joka koostuu
index.html
- jaindex.css
-tiedostoista. Koska kurssin painopiste on CSS:n oppimisessa, suositellaan haasteiden ratkaisemistaindex.css
-tiedostossa. Kun haaste on suoritettu, napsauta "Run Code" -painiketta nähdäksesi sivun livenä ja varmistaaksesi, että haaste on ratkaistu oikein.Lisäksi jokaisessa haasteessa on "Hint"- ja "Solution"-painikkeet. "Hint"-painiketta napsauttamalla saat vihjeitä nykyiseen tehtävään, kun taas "Solution"-painike näyttää oikean CSS-ratkaisun koodiesimerkin.
Tehtävä
- Lisää
relative
-asettelu toiselle elementille, jolla onitem
-luokan nimi. - Siirrä elementtiä
30px
alaspäin ja50px
vasemmalle.
index.html
index.css
- Siirrä alaspäin asettamalla positiivinen arvo
top
-ominaisuudelle. - Siirrä vasemmalle asettamalla negatiivinen arvo
left
-ominaisuudelle.
index.html
index.css
Kiitos palautteestasi!