Haaste: Absoluuttisen Sijainnin Toteuttaminen
Tehtävä
Keskitä lapsielementti (div
, jonka luokan nimi on child
) vanhemman elementin (div
, jonka luokan nimi on parent
) sisälle käyttämällä absoluuttista sijaintia.
Vaiheet:
- Aseta lapsielementille
absolute
-sijainti. - Laske
top
- jaleft
-ominaisuuksien arvot, jotta lapsielementti saadaan keskitettyä vanhemman elementin sisälle. Vanhemmalla elementillä on leveys ja korkeus220px
, kun taas lapsielementillä on leveys ja korkeus80px
. - Varmista, että toisella elementillä on
absolute
-sijainti ja toisellarelative
-sijainti, jotta oikea sijaintikonteksti muodostuu. Muuten absoluuttinen sijainti kohdistuubody
-elementtiin.
index.html
index.css
- Laske
top
-ominaisuuden arvo kaavalla:(parentHeight - childHeight) / 2
. - Laske
left
-ominaisuuden arvo kaavalla:(parentWidth - childWidth) / 2
.
index.html
index.css
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show me the CSS code to center the child element using absolute positioning?
What should the HTML structure look like for the parent and child divs?
Can you explain why one element needs relative positioning and the other absolute?
Awesome!
Completion rate improved to 2.04
Haaste: Absoluuttisen Sijainnin Toteuttaminen
Pyyhkäise näyttääksesi valikon
Tehtävä
Keskitä lapsielementti (div
, jonka luokan nimi on child
) vanhemman elementin (div
, jonka luokan nimi on parent
) sisälle käyttämällä absoluuttista sijaintia.
Vaiheet:
- Aseta lapsielementille
absolute
-sijainti. - Laske
top
- jaleft
-ominaisuuksien arvot, jotta lapsielementti saadaan keskitettyä vanhemman elementin sisälle. Vanhemmalla elementillä on leveys ja korkeus220px
, kun taas lapsielementillä on leveys ja korkeus80px
. - Varmista, että toisella elementillä on
absolute
-sijainti ja toisellarelative
-sijainti, jotta oikea sijaintikonteksti muodostuu. Muuten absoluuttinen sijainti kohdistuubody
-elementtiin.
index.html
index.css
- Laske
top
-ominaisuuden arvo kaavalla:(parentHeight - childHeight) / 2
. - Laske
left
-ominaisuuden arvo kaavalla:(parentWidth - childWidth) / 2
.
index.html
index.css
Kiitos palautteestasi!