Hvad er CSS position-værdierne?

Question

IT Interview Practice · Accepted Answer

`position` styrer, hvordan et element placeres, og om offset-egenskaberne (`top`/`right`/`bottom`/`left`) gælder.

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute: nøgleparringen

`absolute` positionerer et element relativt til dets **nærmeste positionerede forfader** (alt andet end `static`). Så du sætter `position: relative` på en overordnet for at gøre det til referencepunktet:

```css
.card {
  position: relative;   /* becomes the positioning context */
}
.badge {
  position: absolute;   /* positioned relative to .card */
  top: 8px;
  right: 8px;           /* pins the badge to the card's top-right corner */
}
```

Dette relative-parent / absolute-child-mønster er overalt: badges, dropdowns, tooltips, luk-knapper.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — låst til viewport (altid synlig), f.eks. en vedvarende navbar.
- **sticky** — opfører sig som relative, indtil den når tærsklen (`top: 0`), så bliver der på stedet, mens dens beholder er i visning — fantastisk til sektionsoverskrifter.

## En almindelig fælde

`absolute`/`fixed`-elementer fjernes **fra normalflowet**, så de reserverer ikke plads — søskendeelementer opfører sig, som om de ikke er der, hvilket kan forårsage overlap. Planidé for det (f.eks. tilføj padding for at kompensere for en fixed navbar).

## Hvorfor det betyder noget

`position` er afgørende for overlays, sticky headers, modals, dropdowns og badges.

Forholdet relative-parent/absolute-child og sondringen fixed-vs-sticky er den praktiske kerne, du bruger konstant.

relative + absolute: nøgleparringen

fixed vs sticky

En almindelig fælde

Hvorfor det betyder noget

Relaterede spørgsmål