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).
1
div {
2
position: static;
3
}
Copied!

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.
1
top: 33px; /* Felső eltolás */
2
right: 55%; /* Bal eltolás */
3
bottom: -5em; /* Alsó eltolás */
4
left: 9px; /* Bal eltolás */
Copied!

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.
1
div {
2
position: relative;
3
left: 50px;
4
top: 50px;
5
}
Copied!

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.​
1
div {
2
position: absolute;
3
left: 50px;
4
top: 50px;
5
}
Copied!
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.
1
div {
2
position: fixed;
3
left: 50px;
4
top: 50px;
5
}
Copied!

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.
1
div {
2
position: relative;
3
z-index: 150;
4
}
Copied!
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.
Last modified 2yr ago