CSS Position Tulajdonságok Bemutatása

A CSS position tulajdonság meghatározza, hogy egy elem hogyan helyezkedik el a dokumentumban. Ez az oldal bemutatja az összes position értéket és azok működését.

Position: Static

Ez a pozíció a weboldalak alapértelmezett beállítása. Ha nem állítunk be semmilyen pozíciót, az elem automatikusan statikus lesz. A statikus elem mindig a normál dokumentumfolyamot követi, így az olyan tulajdonságok, mint a top, right, bottom vagy left, nem módosítják az elhelyezkedését.

Static

                .element {
                    position: static;
                }
            

Position: Relative

A relative pozíció használatával az elemet elmozdíthatjuk a normál helyéről anélkül, hogy az eredeti helyét a dokumentumfolyamban elveszítené. Ez azt jelenti, hogy az elmozdított elem 'árnyéka' ott marad, ahol az eredetileg lett volna. Az elmozdítást a top, right, bottom és left tulajdonságokkal szabályozhatjuk.

Relative

                .element {
                    position: relative;
                    /* Az aktuális offset értékek itt jelennek meg */
                }
            

Position: Absolute

Az absolute pozíció eltávolítja az elemet a normál dokumentumfolyamból, így az már nem befolyásolja a többi elem elhelyezkedését. Az absolute pozícionált elem elhelyezése a legközelebbi szülőelemhez viszonyítva történik, amelynek pozíciója nem static. Ha nincs ilyen szülőelem, akkor az elhelyezés az egész oldalhoz, vagyis a html elemhez viszonyítva történik.

Szülő elem (relative)

Absolute

                .parent {
                    position: relative;
                }
                .element {
                    position: absolute;
                    /* Az aktuális offset értékek itt jelennek meg */
                }
            

Position: Fixed

A fixed pozíció rögzíti az elemet a böngészőablak (viewport) egy meghatározott pontjára. Az elem mindig az adott pozíción marad, még akkor is, ha a felhasználó az oldalt görgeti. Ez különösen hasznos például fejlécek vagy láblécek rögzítésére.

Fixed

                .element {
                    position: fixed;
                    /* Az aktuális offset értékek itt jelennek meg */
                }
            

Position: Sticky

A sticky pozíció egy speciális beállítás, amely ötvözi a relative és a fixed pozíciók tulajdonságait. Az elem először a normál dokumentumfolyamot követi (relative), de amikor a görgetés során eléri a megadott offset értéket (például top: 20px), az adott ponton rögzül (fixed) a képernyőhöz. Ez különösen hasznos például navigációs sávoknál.

👆 Görgess lefelé

Sticky

Görgess tovább...

Még lejjebb...

A sticky elem követi a görgetést!

Majdnem a végén...

👋 Vége a görgethető területnek

                .element {
                    position: sticky;
                    top: 20px;
                }
            