# Pozicionálás

## Dokumentumfolyam

A *dokumentumfolyam* az elemek sorozata, ennek a sorozatnak a sorrendje alapján rajzolja ki a böngésző a HTML elemeket.

A pozicionálás az elemek a böngésző által, a dokumentumfolyam alapján meghatározott eredeti helyét módosítja. Az elem pozicionálásának típusát a `position` CSS tulajdonsággal lehet beállítani.

## Statikus pozíció (static)

Ez az alapállapot, ebben az estben az elem statikus, *nem* változik a pozíciója (nincs pozicionálva).

```css
div {
    position: static;
}
```

## Eltolás

A nem statikus helyzetű elemek helyzetét tudjuk módosítani a következő tulajdonságokkal:

* `left` - eltolás balról
* `right` - eltolás jobbról
* `top` - eltolás fentről
* `bottom` - eltolás lentről

Az eltolás alapértéke *auto* ez nem befolyásolja az elem helyzetét. Megadhatjuk hosszmértékben, vagy százalékban. Százalékos érték esetén a pozicionálás típusától függő (szülő-)elem mérete alapján számolja ki a böngésző az eltolás mértékét. Felvehet negatív értéket is.

```css
top: 33px;      /* Felső eltolás */
right: 55%;     /* Bal eltolás */
bottom: -5em;   /* Alsó eltolás */
left: 9px;      /* Bal eltolás */
```

## Viszonylagos pozíció (relative)

Viszonylagos pozicionálás esetén az elem eredeti helyéhez képest eltolódik a megadott mértékben.

Az elem eredeti helye megmarad a dokumentum- folyamban, az utána következő elemeket eltolja, ugyanúgy, mintha statikus helyzetű lenne a pozicionált elem.

```css
div {
    position: relative;
    left: 50px;
    top: 50px;
}
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LVZXgRdzUhjPamSfzhI%2F-LVZVF98EO-BiPuGNaP2%2Frelative.png?alt=media\&token=84a5667a-3a19-4b7a-b1c9-cc7441756af1)

## Független pozíció (absolute)

Független pozíció esetén a legközelebbi nem statikus pozicionálású szülő elemhez képest történik az eltolás (ha az elem közvetlen szülője például `relative` pozíciójú, akkor ahhoz képest). \
\
Ha nincs nem statikus szülő, akkor a *body* elemhez képest történik az eltolás.​

```css
div {
    position: absolute;
    left: 50px;
    top: 50px;
}
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LVZXgRdzUhjPamSfzhI%2F-LVZW44DxjRryEewWGmY%2Fabsolute.png?alt=media\&token=40272f51-ad61-42a2-9189-4bd90ddfd373)

Az abszolút pozicionálású elem nem lesz ráhatással a dokumentumfolyamra (eltűnik). Eredeti helyére becsúsznak az őt követő elemek, illetve nem tolja ki szülőelemeinek magasságát sem.

## Rögzített pozíció (fixed)

Rögzített pozíció esetén a böngésző ablakához képest történik az eltolás, ebben az esetben a pozicionált elem nem scrollozódik együtt a többi elemmel (rögzített).

Eredeti helyére becsúsznak az őt követő elemek, illetve nem tolja ki szülőelemeinek magasságát sem - hasonlóan a független pozicionálású elemekhez.

```css
div {
    position: fixed;
    left: 50px;
    top: 50px;
}
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LVZXgRdzUhjPamSfzhI%2F-LVZWgwi501mb6eMJ06P%2Ffixed.png?alt=media\&token=755ffd61-023b-43b8-844b-1f30dbba74ab)

## Z magasság (z-index)

A dokumentumfolyam meghatározza az elemek egymásra lapolódását is, a később jövő\
elemek a korábbiak fölé kerülnek.

Ezen módosíthatunk a *z-index* tulajdonsággal.

```css
div {
    position: relative;
    z-index: 150;
}
```

A böngésző ablak síkjára merőleges tengelyen (z) mozgathatjuk vele az elemeket. A pozitív érték emel az elemen, a negatív érték süllyeszt. Értéke egész szám lehet (negatív is), alapértéke az `auto` vagyis\
a dokumentumfolyam alapján számított magasság.

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LVZXgRdzUhjPamSfzhI%2F-LVZXbtsy6ajgcE29WOZ%2Fz-index.png?alt=media\&token=5fe9f868-b583-4c5e-8020-124bf5ecee91)