CSS Pozicionálás (Position)

A weboldalak elemei alapértelmezésben egymás alá kerülnek, ahogy a HTML kódban megírtad őket. Ezt hívjuk normál dokumentumfolyamnak (Normal Document Flow). De mi van akkor, ha egy "Vissza a tetejére" gombot akarsz rögzíteni a képernyő jobb alsó sarkába, ami görgetéskor is ott marad? Erre való a CSS position tulajdonsága.

A Position 5 értéke

1. Static (Az alapértelmezett)

Minden HTML elem alapértelmezett pozíciója a static. Az elem a normál dokumentumfolyam szerint helyezkedik el. A top, bottom, left és right tulajdonságok nem hatnak rá.

2. Relative (Relatív)

Ha egy elemnek position: relative; értéket adsz, az elem továbbra is a normál dokumentumfolyamban marad (a helye le lesz foglalva), de a top, bottom, left és right értékekkel eltolhatod az eredeti helyéhez képest.

.doboz {
    position: relative;
    top: 20px;  /* 20 pixellel lejjebb tolja az eredeti helyétől */
    left: 30px; /* 30 pixellel jobbra tolja az eredeti helyétől */
}

3. Absolute (Abszolút) - A legveszélyesebb fegyver

Az abszolút pozicionált elem kikerül a normál dokumentumfolyamból. A böngésző úgy tesz, mintha az elem ott sem lenne, a többi elem pedig felcsúszik a helyére. Az abszolút elem a legközelebbi pozicionált (nem static) szülő eleméhez képest fog elhelyezkedni.

A klasszikus fejlesztői trükk: Ha egy gyermeket abszolút módon akarsz mozgatni egy szülő dobozon belül, a szülőnek mindig adj position: relative; értéket!

.szulo-doboz {
    position: relative; /* Ez lesz a viszonyítási pont */
    width: 500px;
    height: 300px;
}

.gyermek-doboz {
    position: absolute;
    top: 0;
    right: 0; /* A szülő doboz jobb felső sarkába tapad */
}

4. Fixed (Rögzített)

A fixed elem szintén kikerül a dokumentumfolyamból, de ő nem egy szülő elemhez, hanem magához a böngésző ablakához (viewport) viszonyítva helyezkedik el. Bárhogy görget a felhasználó, az elem ott marad a képernyőn. Tipikus példája a rögzített navigációs menü vagy a chat ablak.

.chat-gomb {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

5. Sticky (Ragadós)

A modern webfejlesztés csodája. A sticky egy hibrid a relative és a fixed között. Az elem normálisan görgetődik a tartalommal együtt, egészen addig, amíg el nem ér egy megadott pontot (pl. a képernyő tetejét). Ekkor "odaragad", és fixed elemként viselkedik tovább.

.oldalsav {
    position: sticky;
    top: 0; /* Amikor eléri a képernyő tetejét, odaragad */
}

A Z-index (A harmadik dimenzió)

Amikor elkezdesz elemeket pozicionálni (absolute, fixed), előfordulhat, hogy egymásra csúsznak. Melyik lesz felül? Ezt a z-index tulajdonsággal szabályozzuk. Minél nagyobb a szám, annál feljebb van az elem a rétegrendben (közelebb a felhasználó szeméhez).

.felugro-ablak {
    position: fixed;
    z-index: 9999; /* Biztosítja, hogy minden más elem felett jelenjen meg */
}

Fontos: A z-index csak azokon az elemeken működik, amiknek a position értéke nem static!