css-3Blog

Ebben a posztban ismét visszatérünk a CSS alapokhoz, hogy megvizsgáljunk egy újabb fontos CSS tulajdonságot. Ez a position tulajdonság, amely lehetővé teszi, hogy – bizonyos korlátok között – beállíthassuk a prezentált tartalom pozícióját.

A position tulajdonság négy lehetséges értéket vehet fel. Ezek az absolute, a relative, a static és a fixed. Az alapértelmezés ezek közül a static, amely azt közli a layout motorral, hogy nem kell semmi különöset tenned, csak jelenítsd meg a DOM elemeket érkezési sorrendben.

A relative beállítás segítségével megadhatjuk, hogy az adott elem pozíciója, mennyivel tolódjon el ahhoz képest, ahová static beállítással kerülne. Tehát például a következő beállítással az ind osztályú bekezdések 30 pixellel beljebb kezdőnek, mint azok, amelyekre ezt a szabályt nem alkalmaztuk:

p.ind {
    position: relative;
    left: 30px;
}

A position tulajdonságot absolute értékre állítva nagyobb szabadságot kapunk, ugyanis így elvileg mindent oda tehetünk, ahová akarunk. Ha ezt állítjuk be, akkor a vele együtt alkalmazott left, right, top vagy bottom értékek nem ahhoz képest lesznek kiszámolva, hogy hova került volna az elem eredetileg, hanem abszolút viszonyítási rendszerben értendő. Hogy mi minősül abszolút viszonyítási rendszernek? Az absolute pozicionált elem azon őse a DOM fában, amelyik utoljára relative-nak lett beállítva. Ha nem volt ilyen, akkor a body lesz az.

Azért mondom, hogy elvileg tehetünk oda mindent ahová akarunk, mert ugyebár az egyes felhasználók nagyon különböző felbontású kijelzőkön és böngészőkön olvassák vagy nézegetik a weboldalunkat. Ha valamiért egy adott elem nem tud oda kerülni, ahová az absolute beállítással szántuk – mondjuk azért, mert nincs elég hely -, akkor az egész design széteshet. Hasonló problémákkal szembesülünk akkor is, ha bővül az oldal tartalma. Az összes elem koordinátáját nekünk kell újraszámolnunk, mert innentől kezdve a tartalom nem fog önmagának helyet biztosítani, hanem egyik elemünk rálóg majd a másikra. Tehát bár az elején nagy lehet a kísértés az absolute beállítás mértéktelen használatára, mert kicsiben ezzel a legkönnyebb dolgozni, hosszú távon mégis megéri inkább a többi lehetőség használata. Ugyanis azok sokkal rugalmasabbak, és könnyebben karbantartható weboldalt eredményeznek.

Persze az absolute beállításnak is megvan a létjogosultsága, de hagyjuk meg a speciális eseteknek: én személy szerint oldalanként maximum 1-2 elemet helyezek el így, amelyet másképp nem volna praktikus. Például ezen az oldalon a fejlécben levő My Web logó azért kattintható, mert egy linket absolute módon a tetejére pozicionáltam. Megtehettem, mert az oldal layoutja olyan, hogy a logó mindig ugyanazon a helyen lesz, nem kellett attól tartanom, hogy egyszer csak máshol lesz a link, mint a logó.

Hogy példa is legyen, a következő beállítással a bekezdést kirakjuk jó messzire a többitől:

p.abs {
    position: absolute;
    width: 800px;
    right: 10px;
    bottom: 100px;
}

Végezetül térjünk rá a fixed beállítása, amely segítségével egy elemet “odaragaszthatunk” a viewport egy pontjára, és onnan még az oldal scrollozásának hatására sem tűnik el. Leggyakoribb példaként a sok weboldalon feltűnő “feedback” linket tudnám említeni, ami sokszor van ily módon a képernyő valamelyik szélére illesztve. Vigyázat, az Internet Explorer a fixed beállítást csak a 8-as verziótól támogatja! Beállítása semmivel sem bonyolultabb az eddigieknél, de használata legfeljebb ilyen speciális esetekben indokolt:

img.fix {
    position: fixed;
    right: -6px;
    top: 25%;
}

Ezek voltak tehát a legfontosabbak a position tulajdonságról. Érdemes még megjegyezni, hogy egy jól szerkesztett weboldalon nem mindent pozicionálnak ezzel a módszerrel. Az a legjobb, ha a html struktúra, illetve a CSS-ben használt float beállítások segítségével az alapvető layout a helyére kerül. De azért a position így is nagyon fontos tulajdonság, egyenesen a CSS egyik alapkövének tekinthető.