Pozicionálás
A weboldalakon a különböző elemek elhelyezkedése alapértelmezetten a <body> részben lévő elemek sorrendjétől függ olyan módon, hogy az oldalon hátrébb lévő elemek a képernyőn megjelenéskor is hátrébb vagy jobbra kerülnek. Ezt a beállítást a position: tulajdonság static kulcsszavával lehet elérni. alapértelmezetten egy szülő objektumban a leszármazott objektum a bal oldalon legfelül kezdődik.
Ha a szülő objektumhoz képest el szeretnénk tolni egy leszármazott objektum helyét, akkor sz slábbi beállítást kell használni:
position: relative;
Ennek használata után - vele együtt - használhatjuk az alábbi lehetőségeket:
- top: érték; - fent: a befoglaló objektum felső szélétől eltolva a megadott értékkel
- left: érték; - a befoglaló objektum bal oldalához képest eltolva a megadott értékkel
- bottom: érték; - A befoglaló objektum aljához képest felfelé a megadott értékkel
- right:érték; - a befoglaló objektum jobb oldalához képest eltolva a megadott értékkel.
position: absolute;
Ezzel olyan szülőelemhez képest tudunk pozicionálni, amelynek a position tulajdonsága más, mint a static; Ha nincsen ilyen elem, akkor a body-hoz képest lesz pozicionálva az elem. Ilyet tudunk használni például, ha az oldalon állandó helyre akarunbk reklám div-et tenni például. Ez azonban a görgetés során ki fog kerülni a képernyőről. Ugyanúgy használhatók a top:, left: right: , bottom: CSS parancsok.
position: fixed;
Ennek hatására a megadott elem a képernyőn a helyén marad, nem mozdul a görgetéssel. Fix elhelyezésű menük, reklámok esetén lehet használni.
Ha különböző elemeket pozicionálunk, akkor mindig a pozicionált foglalja el a neki megadott helyet.
Ha két pozicionált elem van, akkor a később írja felül a korábbi elemet.
z-index: szám;
Ha több egymásra "hányt" elemnek a sorrendjét akarjuk megadni, akkor a z-index lesz a barátunk. Azok az elemek, amelyeknek a z-index paramétere nagyobb eltakarják a lejjebb lévő elemeket.
float:
Úsztatás: ez azt jhelenti, hogy a szülő objektumhoz képest balra vagy jobbra igazítson egy leszármazott elemet. A lahetőségek: float: left; float:right; Ha nem szeretnénk úsztatni, akkor a float: none; értéket kell használnunk. Csak olyan esetben használhatjuk a float értéket, amelynek be van állítva a szélessége!
clear:
A float tulajdonséágot lehet vele megszüntetni.
Méretek
- width: érték; - Egy doboznak a szélességét lehet beállítani
- height: érték; - Egy doboznak a magasságát lehet beállítani
- min-width: érték; - Egy doboznak a legkisebb szélességét lehet beállítani
- min-height: érték; - Egy doboznak a legkisebb magasságát lehet beállítani
- max-width: érték; - A doboz maximális szélességét állítja be
- max-height: érték; - A doboz maximális szélességét állítja be
Megjegyzések
- A használható mértékegységek a korábban megadottak lehetnek.
- A none érték esetén a méret nem lesz beállítva.
- Olyan elemek esetén, amelyek nem téglalap alakú területet foglalnak el a display: block; beállítás után lehet a méretre vonatkozó beállításokat használni.
overflow:
Ha egy elem túlmutat az aktuális méreten (például egy kép) akkor gördítő sávot adhatunk a befoglaló elemhez.
- overflow: visible; - Ha nem fér el a tartalom, akkor túl fog lógni.
- overflow: hidden; - A túllógó rész rejtve lesz.
- overflow: scroll; - Gördítő sáv kerül az elemhez;
- overflow: auto; - Csak akkor jelenik meg a gördítő sáv, ha szükséges.