HTML elemek pozíciójának megadása

A HTML 4.0 specifiáció megjelenése előtt a felhasználónak kevés beleszólása volt a HTML elemek elhelyezésébe, ezek ugyanis ugyanúgy követik egymást, mint ahogy a szöveg egy szövegszerkesztőben: egymás után töltik fel a sorokat.
Táblázatok segítségével próbálták valamennyire befolyásolni az elrendezést, de ez egyrészt eléggé rugalmatlan megoldás, másrészt a táblázat megjelenítése viszonylag lassú.
A CSS nyújtotta pozíció-megadási lehetőségek szerencsére megoldották ezt a problémát.

A pozíciót a top, bottom, left, right tulajdonságok segítségével adhatjuk meg, melyek meghatározzák a távolságot egy bizonyos viszonyítási ponthoz képest (negatív értéket is megadhatunk). Előbb azonban a pozicionálás módját kell meghatároznunk a position tulajdonság segítségével. Ennek lehetséges értékei: static (ez az alapértelmezett érték), fixed, relative, absolute.
A nem statikus módon pozicionált elemeknek nem csupán a helyzetét adhatjuk meg, hanem ennek változtatásával mozgathatjuk is őket JavaScript segítségével.

Statikus pozicionálás

A statikus pozíció az alapértelmezett (a position tulajdonság alapértelmezett értéke static). Ez annyit jelent, hogy az illető elem „normális” pozícióját nem befolyásolhatjuk a top, bottom, left, right tulajdonságok megadásával, ott foglal helyet, ahol éppen következik a többi elem sorában.

Fix pozicionálás

Fix pozicionálás (position:fixed;) esetén az elhelyezés a böngészőablakhoz lesz viszonyítva (a görgetés sem befolyásolja az elhelyezést). A top tulajdonsággal például a böngészőablak tetejéhez képest mért távolságot adhatjuk meg. Ugyanígy megadhatjuk az aljához képest mért távolságot a bottom tulajdonsággal, illetve a bal vagy a jobb széléhez mért távolságot (a left vagy right tulajdonságot használva).
A fix pozicionálással megadott HTML elem ki van emelve a többi, statikus módon elhelyezett elem rendszeréből (ennek angol megnevezése normal flow), vagyis a többi elem úgy lesz elhelyezve, mintha a fix módon pozicionált elem nem is létezne. Emiatt megtörténhet, hogy a fix módon elhelyezett elem elfed más HTML elemeket, esetleg azok görgetéskor becsúszhatnak alá, ami zavaró is lehet. Erre vigyáznunk kell.
Megjegyzés: Az IE7 és IE8 csak akkor támogatja a fixed értéket, ha a !DOCTYPE meg van adva a dokumentum elején.

Relatív pozicionálás

A relatív módon pozicionált elem (position:relative;) helyzetét a saját normál elhelyezéséhez képest adhatjuk meg a top, bottom, stb. tulajdonságokkal. Az ilyen elem mozgatható (pl. JavaScript kód segítségével), átfedhet más elemeket, a „normál helye” azonban fenn van tartva továbbra is (ki van hagyva számára a hely, ahol normál módon el kéne helyezkednie).
Az ilyen elem gyakorta konténerként szolgál abszolút módon pozicionált elemek számára. Hasznos lehet olyan esetekben, amikor a kívánt elem nem pontosan ott jelenik meg, ahol mi szeretnénk: ezzel a módszerrel errébb-arrább taszíthatjuk a megfelelő top, bottom, stb. tulajdonságo(ka)t használva.

Abszolút pozicionálás

Az abszolút módon pozicionált elem (position:absolute;) helyzete az első olyan szülőeleméhez viszonyított, mely nem statikus. Amennyiben nincs ilyen nem-statikus elembe ágyazva, akkor a html elem az a blokk, amelyhez a viszonyítás történik (más szóval a dokumentum elejéhez képest adjuk meg a pozíciót).
Az abszolút módon pozicionált elemek ki vannak ragadva a statikus módon elhelyezett elemek normál elhelyezkedésének rendszeréből, azaz a többi elem úgy viselkedik, mintha az illető abszolút módon elhelyezett elem nem is létezne.

Egymást átfedő elemek: z-index

A fentebb leírt pozicionálás eredményeképpen egyes elemek átfedhetik egymást. Ebben az esetben a z-index az a tulajdonság, amelynek segítségével befolyásolhatjuk, hogy milyen sorrendben kerüljenek egymásra az egymást átfedő elemek (melyik legyen a másik előtt vagy mögött).
A z-index értéke egész szám. Nagyobb z-index-el rendelkező elem fentebb helyezkedik el, azaz a kisebb z-index-ű elemek előtt foglal helyet.
Megjegyzés: amennyiben két elem átfedi egymást, és nem adtuk meg a z-index értékét, a HTML kódban utóbb elhelyezett elem kerül a korábban elhelyezett fölé.

Float/clear

A float tulajdonság segítségével jobb vagy baloldalra tolhatunk egy elemet. A float tulajdonság értéke ennek megfelelően left, right vagy none (alapértelmezett) lehet. A jobrra vagy balra csúsztatott elem után következő elemek e köré fognak rendeződni. Tipikusan szöveg, illetve kép(ek) egymás mellé rendezése szokás használni a float tulajdonságot, de arra is használhatjuk, hogy a weboldal tartalmát részekre bontsuk, és ezeket megfelelőképpen elhelyezzük, anélkül, hogy táblázatot használnánk. Ezt mutatja be a példák között szereplő 4_float_pl.htm állomány.
Megjegyzés: Az abszolút módon pozicionált elemek a float tulajdonságot figyelmen kívül hagyják.
Amennyiben meg szeretnénk szüntetni a float tulajdonság hatását (nem akarjuk, hogy további elemek köré rendeződjenek), ezt a clear tulajdonság segítségével tehetjük meg. Lehetséges értékei: right, left vagy both.

Konfliktushelyzetek kezelése

Az egyes stílusjegyek különböző forrásból származhatnak: megadhatja őket maga a szerző (inline módon, belső vagy külső stíluslapként), lehet az a böngésző alapértelmezett stílusa, ugyanakkor egyes böngészők lehetővé teszik a felhasználó számára, hogy bizonyos stílusjegyeket maga állítson be (például ha valaki rövidlátó, meghatározhat egy minimális betűméretet). Kérdés, hogy konfliktushelyzet esetén (a szerző által különböző szinteken megadott stílusjegyek prioritási sorrendjén túl) milyen kritériumok döntik el, hogy melyik beállítás legyen figyelembe véve a megjelenítésnél. A továbbiakban a konfliktus feloldására használt algoritmusnak az alapelveit ismertetjük.
A stílusjegyek forrásán kívül van még egy befolyásoló tényező: a stílusjegy fontossága. Ez kétféle lehet minden stílusjegy esetén: normál vagy fontos. A CSS stílusállomány szerzője fontossá tehet egy adott stílusjegyet az alábbi szintaxissal:

p.right {align: right !important;}

A fentieket figyelembe véve a HTML elemek megjelenítéséhez használt virtuális stílus úgy jön létre, hogy előbb össze lesznek gyűjtve a különböző forrásokból származó stílusjegyek, és amennyiben konfliktushelyzet adódik, az alábbi prioritási sorrend lesz a döntő:

Megtörténhet, hogy marad továbbra is fennálló konfliktus. Ebben az esetben a használt szelektor specifikussága a mérvadó. A sorrend (a prioritás csökkenő sorrendjében):

Amennyiben továbbra is konfliktus állna fenn, úgy a későbbi felülírja a korábban definiált stílusjegyet.

Ugrás az oldal tetejére