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.

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>

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

kiskep

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.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!