Ebben a leckében megismerkedünk a vizuális formázásmodellel, a pozícionálási tipusokkal, a mélységi sorrend fogalmával.
Ahhoz, hogy a weboldalunk összetevőt megfelelő helyre pozícionálhassuk a képernyőn, meg kell ismerkednünk a vizuális formázásmodell alapjaival is.
A position tulajdonság segítségével beállíthatjuk egy elem pozícionálásának típusát.
Értékek:
A position tulajdonság értékei nem öröklődnek.
A top, bottom, left és right tulajdonságokkal – ha a pozícionálás típusa megengedi – pozícionálhatjuk elemeinket.
Értékek:
A top, bottom, left és right tulajdonságok értékei nem öröklődnek.
A z-index tulajdonság segítségével meghatározhatjuk az egymást fedő elemek megjelenítési sorrendjét.
Értékek:
A z-index tulajdonság értékei nem öröklődnek.
Példa - Statikus pozícionálás példa
A példában két statikus pozícionálású doboz van elhelyezve egymás után. Semmi meglepő nem történik, a dobozok megjelenési sorrendjét a kódban elfoglalt sorrend határozza meg.
Példa - Relatív pozícionálás
Az első doboz statikus pozícionálású. A második viszont relatív. Ahhoz képest, ahova alaphelyzetben került volna, el van tolva jobbra 50 képponttal (left:50px), lefelé 10 képponttal (top:10px).
A harmadik doboz szintén relatív pozícionálású. Ahhoz a pozícióhoz képpest, ahova statikus pozícionálás esetén került volna el van tolva, mégpedig balra és fölfelé, amit úgy értünk el, hogy negatív értéket adtunk meg mindkét esetben (left:-10px; top:-10px).
Látható, hogy a beállítások miatt részben takarja egymást a két doboz.
Állítsd át az összes relatív értéket statikusra, hogy lásd, mi lett volna az alap elrendezés.
Ezután állítsd be a relatív pozícionálást úgy, hogy a második doboz kicsit takarja ki az elsőt, a harmadik pedig a másodikat.
Példa - Abszolút pozícionálás, 1. példa
Ebben a példában mindkét doboz abszolút módon van pozícionálva. Az első 10 képponttal van eltolva a szülő elem (jelen esetben body) bal felső sarkától jobbra (left:10px) és le (top:10px).
A második doboznak relatív (50%)-os szélességet állítottunk be, és úgy toltuk el, hogy ne kerüljön a bal oldali dobozra.
Figyeljük meg, hogy a második doboznál az 50%-os méret a szülő elem méretéhez képest kerül meghatározásra, nem pedig az adott pozícionálásnál még rendelkezésre álló hely függvényében.
Példa - Abszolút pozícionálás, 2. példa
Ebben a példában úgy pozícionáltuk a dobozokat, hogy takarják egymást. Alapértelmezetten az a doboz takarja a másikat, amelyik a kódban később található, de ezt most felülbíráltuk, mivel az első doboznak nagyobb z-index értéket állítottunk be, mint a másodiknak.
Módosítsd úgy a z-index értéket, hogy a második doboz takarja az elsőt!
Példa - Abszolút pozícionálás, 3. példa
Ebben a példában két dobozunk van. Az első abszolút pozícionálású, a másodiknál nincs megadva semmi, ezért statikus pozícionálású. De akkor a második doboz miért nem a bal oldalon jelenik meg, hanem eltolva jobbra? Ennek oka, hogy a body elemnek be van állítva egy bal oldali margó, ezért erre a területre nem kerülhet statikus pozícionálású elem.
Viszont a margóként megadott üres helyet kihasználhatjuk arra, hogy egy dobozt abszolút módon arra a területre pozícionáljuk. Kétoszlopos, folyékony elrendezés esetén ez a megoldás gyakran alkalmazott.
Példa - Abszolút pozícionálás, 4. példa
Ebben a példában három dobozunk van, és mindhármat abszolút módon igazítottuk. Mivel az eltolásnál és a szélesség megadásnál is százalékos értéket állítottunk be, ezért ez a felosztási mód is követi a böngészőablak méretének változását (folyékony arculat). Keskeny kijelzőre viszont ez a három oszlopos megjelenés nem lesz ideális, később majd látni fogjuk, hogy felbontásfüggő stíluslapot is készíthetünk.
Az előző példában az abszolút igazítás igazából a body elemhez képest történt. Nézzünk egy olyan esetet is, amikor egy tartalmazó elem pozíciójához képest kellene megadni az eltolást.
Van egy div elemünk, amelyben fotókat szeretnénk elhelyezni úgy, hogy takarják egymást, de magát a div elemet is szeretnénk pozícionálni, így a benne lévő képeket mindig a tartalmazó elem pozíciójához képpest kellene eltolni.
Példa - Abszolút pozícionálás a szülő elem pozíciójához képest
A képek abszolút módon vannak pozícionálva, mégpedig a tartalmazó elem (doboz1) helyzetéhez képest. Ezt úgy értük el, hogy a tartalmazó elem pozícionálását statikustól eltérőre (jelen esetben relatívra) állítottuk be.
Nézd meg, hogyan változik a példa, ha a doboz1 pozícionálását relative helyett static-ra állítod? Ha a doboz1 elé beszúrsz egy elemet (pl. címsort) mit tapasztalsz? És ha visszaállítod a relative pozícionálást a dobozra?
Példa - Fix pozícionálás
Ebben a példában a bal oldalon elhelyezett dobozt fixen pozícionáltuk, emiatt az oldal gördítésekor egy helyben marad.
A fix pozícionálású dobozok előnye, hogy mindig láthatóak, nem gördülnek el. Viszont, ha a megjelenítő program magassága kisebb, mint a fix pozícionálású doboz magassága, akkor a doboz alján lévő információhoz a felhasználó nem tud hozzáférni, csak ha a nagyítási szintet csökkenti, de azáltal megint sérül az olvashatóság.
Az oldalunk felépítésének, elrendezésének kialakításában a korábban ismertett pozícionálási sémákat, valamint az elemek lebegtetésének (float) lehetőségét is kihasználhatjuk.
Azonban nem feltétlenül kell újra kitalálnunk olyan oldalfelépítéseket, amelyek már máshol beváltak.
Több olyan weboldal is van, ahol a különböző oldalfelépítések megvalósításához kapunk ötleteket, illetve letölthető sablonokat.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.