Summary  
This chapter explains how the CSS position property and directional offsets (top, right, bottom, left) work together—using values static, relative, absolute, fixed, and sticky—to place elements inside or outside the normal document flow.  

General domain of usage  
Front-end web development for UI layout and overlays.

In modern web development, we often need to place elements outside the normal flow, for example, showing text over a product card, opening a pop-up or modal, or displaying a mobile menu. All of this is handled using the `position` property.
```css
position: static | relative | absolute | fixed | sticky
```

The `position` property changes how an element is placed on the page. By default, every element is `position: static`. Once you switch to another value, you can also use `top`, `left`, `right`, and `bottom` to control its exact location.
## Default Document Flow
By default, elements appear on the page in the same order as in the HTML. This natural flow should be kept unless positioning is required for specific UI behaviors like popups, modals, dropdowns, or mobile menus.

Forbedre 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 lær å effektivisere 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.

Understanding CSS Positioning

Default Document Flow