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).
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.
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.
div {
position: relative;
left: 50px;
top: 50px;
}

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.​
div {
position: absolute;
left: 50px;
top: 50px;
}
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.
div {
position: fixed;
left: 50px;
top: 50px;
}

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.
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.