CSS pozíció (abszolút, relatív, rögzített, statikus, ragadós)
A CSS position segítségével egy elem pozícióját állíthatjuk be, azaz azt, hogy hogyan legyen meghatározva a helyzete. Megadhatjuk a konkrétan a helyzetét, viszonyíthatjuk más elemhez, de akár rögzíthetjük a képernyő egy adott pontjára is.
A CSS postion ezeket az értékeket veheti fel:
- static
- relative
- fixed
- absolute
- sticky
Először meg kell határoznunk az elemek pozícionálásának módját, majd meg kell adnunk, hogy jobbra, balra, alulra vagy felülre szeretnénk őket igazítani. Először mindig a position típusát kell megadni, mert anélkül nem működik az iránymeghatározás.
Statikus pozíció
Alapértelmezetten a HTML elemek pozíciója statikus. Ebben az esetben a top, bottom, left és right tulajdonságok nem befolyásolják a tartalom elhelyezkedését, ilyenkor a tartalom az oldal normális áramlása szerint helyezkedik el.
Szintaxis
position: static;
Code language: JavaScript (javascript)Példa
HTML kód
<p style="position: static;">position: static;</p>
Code language: HTML, XML (xml)Eredmény
position: static;
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Láthatjuk, hogy a szöveg úgy jelent meg, ahogy arra alapból számítottunk, mintha semmit sem csináltunk volna.
Relatív pozíció
Ezzel a CSS tulajdonsággal a HTML elemeket relatívan eltolhatjuk az alapértelmezett pozíciójukhoz képest. Ha a relatív pozícionálást választjuk, akkor már muszáj használnunk valamelyik oldalra történő eltolást. Ezek az oldalra történő eltolások a: left, right, top, bottom.
Szintaktika
position: relative;
IRÁNY: ÉRTÉK;
Code language: HTTP (http)Az irányhoz kell megadnunk a top, right, left vagy bottom szót beírnunk, akár többet is használhatunk, ha több irányba is szeretnénk eltolni. Ezután pedig adjuk meg, hogy milyen értékkel szeretnénk eltolni a kiválasztott irányba.
Példa
HTML kód
<p style="position: relative; left: 50px;">position: relative;</p>
Code language: HTML, XML (xml)Eredmény
position: relative; left: 50px;
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ha picit fentebb tekertek, majd újra ide vissza le, akkor láthatjátok, hogy ez a p elem már bentebb van tolva.
Rögzített (fix) pozíció
Ha fix, azaz rögzített pozíciót használunk, akkor a tartalom a kijelzőnek mindig ugyanazon a pontján fog maradni, görgetéstől függetlenül. Szóval hiába görgetünk lentebb, a tartalom ugyanúgy gördülni fog lefele. Ebben az esetben is a left, right, top, bottom tulajdonságokkal kell meghatároznunk, hogy hol helyezkedjen el pontosan a tartalom.
Szintaktika
position: fixed;
IRÁNY: ÉRTÉK;
Code language: HTTP (http)Itt is a left, right, top, bottom irányokból lehet választani, mely mellé egy eltolási értéket kell társítani.
Példa
HTML kód
<p style="position: fixed; left: 0; top:0; background-color:red;">position: fixed;</p>
Code language: HTML, XML (xml)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ha felugrik egy ablak a cookie-k használatáról, akkor fogadd (vagy utasítsd) el és úgy tudsz görgetni is. Ekkor látszik igazán, hogy bárhova görgetsz a piros hátterű rögzített pozíciójú szöveg követni fogja azt.
Független (abszolút) pozíció
Ha abszolút pozíció megadást választunk, akkor az adott HTML elemet nem a weblap egészéhez, hanem a legközelebbi őséhez viszonyítjuk. Ha nincs őse az elemnek, akkor a body elemhez képest viszonyítja a távolságot. Azért hívjuk független helyzetmegadásnak is, mert ebben az esetben a pozíció meghatározás teljes mértékben független a szövegfolyamtól. Természetesen ilyenkor is a left, right, top és bottom tulajdonságokkal tolhatjuk el az elem helyzetét.
Szintaktika
position: absolute;
IRÁNY: ÉRTÉK;
Code language: HTTP (http)Továbbra is a left, right, top, bottom irányokból lehet választani, mely mellé egy eltolási értéket kell megadni.
Példa
HTML kód
<div style="position: relative; left: 50px;"><p style="position: absolute; left: 50px;">position: absolute;</p></div>
Code language: HTML, XML (xml)Eredmény
position: absolute;
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Láthatjuk, hogy a p tárolójának a div-nek is van egy 50 pixeles bal oldali eltolása. A p abszolút helymeghatározása ehhez viszonyítja a rá vonatkozó újabb 50 pixelt. Azaz a két 50 pixel összeadódik, így összesen 100 pixeles eltolása lesz a p-nek.
Ragadós (sticky) pozíció
Ez a módszer nagyban hasonlít a meghatározott (fix) pozíciójú módszerhez, hiszen a pozíció itt is a felhasználó görgetéséhez viszonyítva van meghatározva. Nagyon korrektül megfogalmazva azt mondhatjuk, hogy ez a módszer a relatív és a fix módszer egyvelege, hiszen mindaddig relatívként viselkedik, míg nem kerül a felhasználó látómezőjébe, ha ezt megtörtént, akkor átvált rögzített pozícióba, azaz odaragad a képernyőre.
Szintaxis
position: sticky;
IRÁNY: ÉRTÉK;
Code language: HTTP (http)Az irány left, right, top, bottom lehet, mely mellé jön egy eltolási érték.
Példa
HTML kód
<p style="position: sticky; top: 0; background-color: red;">position: sticky;</p>
Code language: HTML, XML (xml)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Kezdj el lentebb görgetni az „Eredmény” rész alatt és akkor láthatod, hogy ahol szembejön a piros hátterű szöveg, ott a képernyőre ragad, azaz onnantól kezdve fixen ott marad a képernyőn.
Egymásra helyezett elemek
Ha az elemeket már pozícionáltuk a CSS position tulajdonságával, akkor akár már egymásra is helyezhetjük őket. Ezt a CSS z-index tulajdonságával érhetjük el, amellyel azt határozhatjuk meg, hogy egy elem hanyadik helyen legyen a többihez képest. Úgy kell ezt elképzelni mint egy képszerkesztő programban a rétegeket, amelyik legfelül van az látszódik legfelül. Ami lentebb van azt eltakarja a felette lévő. A CSS z-index-nél a fentebb lévő rétegek magasabb számot kapnak, míg a lentebb lévők kisebbet. Negatív és pozitív számok egyaránt megengedettek.
Szintaktika
z-index: SZÁM;
Code language: HTTP (http)Fontos, hogy a z-index csak olyan elemen működik, amelyet már pozícionáltunk. A szám helyére bármilyen negatív vagy pozitív szám kerülhet.
Példa
HTML kód
<img src="https://webiskola.hu/kiskep.jpg" style="position:absolute; z-index:1;">
<p style="position: relative; z-index: 2; color: red;">z-index</p>
Code language: HTML, XML (xml)Eredmény
z-index
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A példán látszik, hogy a kép 1-es z-index-et kapott, míg a szöveg 2-est, mivel a szöveg nagyobb z-index számmal rendelkezik, így a kép fölött fog elhelyezkedni.
