## Oppgave
Sentrer det underordnede elementet (`div` med klassenavn `child`) inne i det overordnede elementet (`div` med klassenavn `parent`) ved hjelp av absolutt posisjonering.

Steg:
1. Bruk `absolute` posisjonering på det underordnede elementet.
2. Beregn verdiene for `top` og `left`-egenskapene for å sentrere det underordnede elementet i det overordnede elementet. Det overordnede elementet har en bredde og høyde på `220px`, mens det underordnede elementet har en bredde og høyde på `80px`.
3. Sørg for at ett element har `absolute` posisjonering, og det andre har `relative` posisjonering for å etablere riktig posisjoneringskontekst. Ellers vil den absolutte posisjoneringen være relativ til `body`-elementet.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9InBhcmVudCI+CiAgICAgIDxwPnBhcmVudDwvcD4KICAgICAgPGRpdiBjbGFzcz0iY2hpbGQiPgogICAgICAgIDxwPmNoaWxkPC9wPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LnBhcmVudCB7CiAgd2lkdGg6IDIyMHB4OwogIGhlaWdodDogMjIwcHg7CiAgbWFyZ2luOiAwIGF1dG87CiAgYmFja2dyb3VuZC1jb2xvcjogIzliYmFlZTsKICBwb3NpdGlvbjogX19fOyAvKiBDaGFuZ2UgdGhpcyBsaW5lICovCn0KCi5jaGlsZCB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmOGEwMDsKICB3aWR0aDogODBweDsKICBoZWlnaHQ6IDgwcHg7CgogIC8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYmVsb3cgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwogIHBvc2l0aW9uOiBfX187CiAgdG9wOiBfX187CiAgbGVmdDogX19fOwogIC8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYWJvdmUgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKZGl2IHsKICBib3JkZXItcmFkaXVzOiAyMHB4OwogIHBhZGRpbmc6IDEwcHg7Cn0KCnAgewogIGZvbnQtc2l6ZTogMjRweDsKICBtYXJnaW46IDAgYXV0bzsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgY29sb3I6ICNmYmZjZjg7CiAgZm9udC13ZWlnaHQ6IDcwMDsKfQ==

1. For å beregne verdien for `top`-egenskapen, bruk formelen: `(parentHeight - childHeight) / 2`.
2. For å beregne verdien for `left`-egenskapen, bruk formelen: `(parentWidth - childWidth) / 2`.

LnBhcmVudCB7CiAgd2lkdGg6IDIyMHB4OwogIGhlaWdodDogMjIwcHg7CiAgbWFyZ2luOiAwIGF1dG87CiAgYmFja2dyb3VuZC1jb2xvcjogIzliYmFlZTsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi5jaGlsZCB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmOGEwMDsKICB3aWR0aDogODBweDsKICBoZWlnaHQ6IDgwcHg7CgogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICB0b3A6IDcwcHg7CiAgbGVmdDogNzBweDsKfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCmRpdiB7CiAgYm9yZGVyLXJhZGl1czogMjBweDsKICBwYWRkaW5nOiAxMHB4Owp9CgpwIHsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luOiAwIGF1dG87CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIGNvbG9yOiAjZmJmY2Y4OwogIGZvbnQtd2VpZ2h0OiA3MDA7Cn0=

Hev dine ferdigheter innen styling ved å mestre avanserte CSS-teknikker for moderne webdesign. Plasser og håndter elementer med presisjon ved hjelp av avanserte posisjoneringsstrategier. Lag jevne overganger og engasjerende animasjoner for å forbedre brukeropplevelsen. Transformer og manipuler elementer for dynamiske visuelle effekter. Bygg responsive design som tilpasser seg ulike enheter, og effektiviser arbeidsflyten med CSS-preprosessorer som Sass.

Undersøk hva deltakerne kan forvente av dette kurset i avansert HTML og CSS-styling. Hvilke forkunnskaper kreves før du starter kurset? Hvilke emner vil bli dekket?

Posisjonering og håndtering av elementer på nettsider. Lær om ulike posisjonerings-egenskaper, oppdag hvordan du bruker stablingsrekkefølge for å kontrollere synligheten til overlappende elementer, og håndter til slutt innhold som flyter utenfor.

Utforsk kraften i overganger og lær hvordan du kan forbedre brukeropplevelsen. Oppdag hvordan egenskaper kan animeres jevnt og gradvis for å skape sømløse tilstandsendringer.

Lær om animasjonsegenskapen og hvordan den kan brukes til å skape dynamiske og engasjerende design. Oppdag hvordan du kan lage komplekse animasjoner ved hjelp av nøkkelbilder og hvordan du kan kontrollere animasjonen.

Utforsk transformasjonsegenskapen, som gjør det mulig å endre utseendet og posisjonen til elementer på en nettside. Lær hvordan du kan skalere, rotere, skjevstille og flytte elementer i to og tre dimensjoner. Kombiner flere transformasjoner for å skape mer komplekse effekter.

Prinsippene og teknikkene som brukes i adaptivt og responsivt design har som mål å gjøre nettsteder og applikasjoner tilgjengelige og visuelt tiltalende på tvers av ulike enheter, skjermstørrelser og orienteringer.

Lær om forprosessorer i CSS og hvordan de kan bidra til å skrive mer effektiv og vedlikeholdbar kode. Forstå hvordan forprosessorer kan forenkle arbeidsflyten og generere renere CSS-kode.

Utfordring: Implementere Absolutt Posisjonering

Oppgave

Awesome!

Utfordring: Implementere Absolutt Posisjonering

Oppgave