Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Haaste: Suhteellisen Sijoittelun Käyttäminen | CSS-sijoittelun Hallinta
Edistyneet CSS-tekniikat

bookHaaste: Suhteellisen Sijoittelun Käyttäminen

Huomio

Jokainen haaste tässä kurssissa sisältää koodiesimerkin, joka koostuu index.html- ja index.css-tiedostoista. Koska kurssin painopiste on CSS:n oppimisessa, suositellaan haasteiden ratkaisemista index.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ä

  1. Lisää relative-asettelu toiselle elementille, jolla on item-luokan nimi.
  2. Siirrä elementtiä 30px alaspäin ja 50px vasemmalle.
index.html

index.html

index.css

index.css

copy
  1. Siirrä alaspäin asettamalla positiivinen arvo top-ominaisuudelle.
  2. Siirrä vasemmalle asettamalla negatiivinen arvo left-ominaisuudelle.
index.html

index.html

index.css

index.css

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 3

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

Suggested prompts:

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

bookHaaste: Suhteellisen Sijoittelun Käyttäminen

Pyyhkäise näyttääksesi valikon

Huomio

Jokainen haaste tässä kurssissa sisältää koodiesimerkin, joka koostuu index.html- ja index.css-tiedostoista. Koska kurssin painopiste on CSS:n oppimisessa, suositellaan haasteiden ratkaisemista index.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ä

  1. Lisää relative-asettelu toiselle elementille, jolla on item-luokan nimi.
  2. Siirrä elementtiä 30px alaspäin ja 50px vasemmalle.
index.html

index.html

index.css

index.css

copy
  1. Siirrä alaspäin asettamalla positiivinen arvo top-ominaisuudelle.
  2. Siirrä vasemmalle asettamalla negatiivinen arvo left-ominaisuudelle.
index.html

index.html

index.css

index.css

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 3
some-alt