CSS Position tulajdonság

A position tulajdonság segítségével változtathatjuk meg az elemek elhelyezkedési módját és elhelyezkedését. Ha egy elemet szeretnénk az oldalon bármerre mozgatni vagy akár a többi fölött megjeleníteni, akkor az "absolute" értéket kell beállítani.

Az elem mozgatásához a top, left, right, bottom tulajdonságok értékeit kell megváltoztatnunk. Pl.

    p
    {
        position: absolute;
        top: 10px;
    }


        

Ahogy az alábbi képen is látszi, a szöveg rámászott a képre (a kép fölé került), és fentről számítva 10 pixelnyit le van taszítva.

Fontos: Az absolute értékkel rendelkező elemek pozíciója, a szülök között található első elemhez viszonyitva történik, mely rendelkezik a position: relative értékkel.
Amennyiben nem találunk ilyen elemet, így a body elemhez viszonitva fognak elhelyzkedni az absolute értékkel rendelkező elemek. A fenti példában a "p" elemeket a többi elem fölé emelve fentről 10px távolságot taszítva lefele fog elhelyezkedni.

Ha szeretnénk egy másik elemhez viszonyitani, akkor az adott elemre beállíthatjuk a "position: relative;" értéket.

    div
    {
        position: relative;
    }
    div p
    {
        position: absolute;
        top: 10px;
    }


        

A fenti példában a "p" elemek a többi elem fölé kerülnek, a szülök között (melyek div elemek) található első elemhez viszonyitva 10 pixelt eltolva fentről lefele.

A position értéke még lehet "fixed" is, ebben az esetben az adott elem mindig a beállított pozícióban marad, az oldal görgetése során sem mozdul el. Ebben az esetben is érvényes az, hogy lehet bármelyik szülő elemhez viszonyítani, egyébként az oldal körvonalaihoz történik a viszonyítás (felső, alsó, bal, jobb).