Mitkä ovat CSS position -arvot?

Question

Accepted Answer

`position` ohjaa kuinka elementti sijoitetaan ja ovatko siirtymäominaisuudet (`top`/`right`/`bottom`/`left`) voimassa.

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

`absolute` sijoittaa elementin suhteessa sen **lähimpään sijoitettuun esi-isään** (mihin tahansa muuhun kuin `static`). Joten asetat `position: relative` pääelementtiin tehdäksesi siitä vertailupisteitä:

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

Tämä relative-parent / absolute-child -kuvio on kaikkialla: merkinnät, avattavat valikot, työkaluvihjeet, sulkemispainikkeet.

## 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** — lukittu näkymään (aina näkyvä), esim. pysyvä navigointivalikko.
- **sticky** — käyttäytyy kuin relative kunnes se osuu kynnysarvoon (`top: 0`), sitten pysyy paikallaan kun sen säilö on näkyvissä — loistava osion otsikoille.

## Yleinen sudenkuoppa

`absolute`/`fixed` -elementit **poistetaan normaalivirroista**, joten ne eivät varaa tilaa — sisaruselementit käyttäytyvät kuin ne eivät olisi olemassa, mikä voi aiheuttaa päällekkäisyyttä. Suunnittele sen mukaan (esim. lisää padding kompensoidaksesi kiinteän navigaatiopalkin).

## Miksi se on tärkeää

`position` on olennainen peittoteille, kiinteille otsikoille, modaalille, avattaville valikoille ja merkinnöille.

Relative-parent/absolute-child -suhde ja fixed-vs-sticky -ero ovat käytännöllinen ydin, jota käytät jatkuvasti.