CSS pozícionálás - példák

Az alábbi példák a különböző CSS pozícionálásokat mutatják be.

	Statikus itt két egymást követő, statikus pozíciójú div szerepel
	Abszolút 1. Két abszolút módon igazított div Egyiknél abszolút, másiknál relatív szélesség beállítást alkalmaztunk
	Abszolút 2. Két abszolút módon igazított div A pozíció úgy került beállításra, hogy részben takarják egymást
	Abszolút 3. Három abszolút módon igazított div A pozíció úgy került beállításra, hogy részben takarják egymást
	Abszolút 4. Három abszolút módon igazított div A pozíció úgy került beállításra, hogy részben takarják egymást A mélységi sorrend a z-index paraméterrel lett beállítva
	Abszolút 5. Az első div esetén abszolút, a másodiknál statikus igazítást alkalmaztunk Hogy ne takarja a két div egymást, a body egy kellően nagy baloldali margó értéket kapott (megfigyelhető, hogy itt a bal oldali div gördítéskor elmozdul, később látni fogjuk, hogy akár egyhelyben is maradhatna)
	Abszolút 6. Három abszolút módon pozícionált div a szélesség és pozíció relatív módon került megadásra
	Abszolút 7. a fejléc relatív módon került pozícionálásra a fejlécbe beágyazva három abszolút módon pozícionált div került ez utóbbiak szélessége és pozíciója relatív módon került megadásra
	Fix Az első div esetén fix, a másodiknál statikus igazítást alkalmaztunk Hogy ne takarja a két div egymást, a body egy kellően nagy baloldali margó értéket kapott Annyiban különbözik a korábban látott (abszolút 5) megoldástól, hogy itt a bal oldali div gördítéskor egy helyben marad (amennyiben a böngésző támogatja)
	Lebegő 1 a két div egymás után került megadásra, nincs egymásbaágyazva az első div lebegő tulajdonságú, balra igazított, a második statikus
	Lebegő 2 a három div egymás után került megadásra, nincs egymásbaágyazva az első és második div lebegő tulajdonságú, balra, illetve jobbra igazított, a harmadik statikus
	Lebegő 3 itt az első diven belül helyezkedik el a második div ezután következik a harmadik div az első és harmadik div statikus, a második lebegő, balra igazított ahogy látható, a lebegő elem túlnyúlhat a tartalmazó elem területén
	Lebegő 4 az előző példához képest annyi a különbség, hogy a harmadik div esetén alkalmazásra került a clear tulajdonság, így a lebegő elem már nem takarja a harmadik div területét
	Lebegő 5 itt az első divbe került beágyazásra két másik div, amelyek mindegyike lebegő, jobbra igazítva.
	Lebegő 6 Ugyanaz, mint az előző példa, annyi különbséggel, hogy a harmadik divet elláttuk egy clear:right tulajdonsággal
	Lebegő 7 Itt az első doboz lebegő, jobbra igazított, a második statikus, de szélességük relatív módon került beállításra
	Összetett itt egy komplex megvalósítást láthatunk a kulso div középre igazított, szélessége abszolút módon került megadásra. Ez tartalmazza a többi divet is. a fejléc és információs sáv pozícionálása statikus a menu és a tartalom egy menutart nevű divben helyezkedik el, amelynek pozicionálása relatív módon történik a menük lebegő elemek, a tartalom pedig statikus a lábléc statikus
	Relatív az első div statikus pozícionálású a második és harmadik div pozíciója relatív módon került beállításra a left és top értékek beállításával