Vilka är CSS position-värdena?

Question

Accepted Answer

`position` styr hur ett element placeras och om offset-egenskaperna (`top`/`right`/`bottom`/`left`) gäller.

```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: nyckelkombinationen

`absolute` positionerar ett element i förhållande till dess **närmaste förfader som är positionerad** (vad som helst annat än `static`). Så du ställer `position: relative` på en förälder för att göra det till referenspunkten:

```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 */
}
```

Detta relative-förälder / absolute-barn-mönster finns överallt: märken, rullgardinsmeny, verktygstips, stäng-knappar.

## 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 till viewport (alltid synlig), t.ex. en beständig navigeringsfält.
- **sticky** — fungerar relativt tills det når tröskeln (`top: 0`), sedan stannar det där medan dess container är i vyn — bra för avsnittsrubriker.

## En vanlig fallgrop

`absolute`/`fixed` element är **borttagna från normalt flöde**, så de reserverar inte utrymme — syskon agerar som om de inte finns, vilket kan orsaka överlappning. Planera för det (t.ex. lägg till padding för att kompensera en fast navigeringsfält).

## Varför det är viktigt

`position` är väsentlig för överlagringar, klistriga rubriker, modaler, rullgardinsmenyer och märken.

Relative-förälder/absolute-barn-relationen och fixed-vs-sticky-skillnaden är det praktiska kärnan du använder konstant.