Absolute pozícionálás CSS segítségével

Gyakran felmerülő kérdés, hogy lehet egy dobozt absolute pozícionálással egy olyan lapszerkezetben elhelyezni, ahol a lap tartalma mindig középen van, tehát a doboznak (nevezzük mostantól reklám doboznak) nem mondhatjuk azt, hogy pl. a böngésző ablakától X távolságra jelenjen meg.

A megoldás: egy relative pozícionált elembe (mostantól nevezzük fejlécnek) kell elhelyezni a reklámdobozt, melynek eredményeként ha a fejléc helyzetét módosítjuk, vele automatikusan a reklám doboz helyzete is változni fog. Nézzük a kódot.

A CSS-ben definiáljuk a fejléc doboz tulajdonságait:

1
2
3
4
5
6
#fejlec {
	width: 300px;
	height: 100px;
	position: relative;
	background-color: #999999;
	}

A doboz 300px széles és 100px magas lesz, a háttere szürke, és a pozíciója (itt a lényeg) relative.

A HTML kódban így fog kinézni:

1
<div id="fejlec"></div>

Most egészítsük ki a CSS-t a reklám dobozra vonatkozó résszel:

1
2
3
4
5
6
7
8
#reklam {
	width: 100px;
	height: 50px;
	position: absolute;
	background-color: #000000;
	left: 10px;
	top: 10px;
	}

A reklám doboz szélessége 100px, a magassága 50px, a pozíciója (itt a lényeg) absolute, a háttérszíne fekete és balról illetve felülről 10px távolságot fog tartani.

A HTML kódot ezután már így kell módosítani:

1
2
3
<div id="fejlec">
<div id="reklam"></div>
</div>

Mint látható, a reklám doboz a fejléc dobozba DIV-jébe került bele. Tulajdonképpen ennyivel kész is vagyunk, hisz a reklám doboz minden esetben a fejléc dobozon belül fog megjelenni, méghozzá úgy, hogy a fejléc doboz tetejétől és bal oldalától 10-10px távolságot fog tartani.

Mivel a fejléc doboz pozíciójának relative értéket állítottunk be és a reklám doboznak pedig absolute-t, így a reklám doboz számára a 0px (ami egyébként a böngészőablak széleitől számítódna) a fejléc doboz széleitől fog számítódni.

A csatolt fájl kódjában látható, hogy ha a fejléc doboz helyzetét módosítjuk (#fejlec1), akkor vele együtt a reklám doboz helyzete is változni fog.

A reklám doboz helyzetét az alábbiakkal lehet módosítani: top, right, bottom és left.

Ennek megfelelően, ha a reklám dobozt a jobb felső sarokban szeretnéd elhelyezni, akkor a CSS-ben a kódot az alábbi szerint kell módosítani (right-t kell beállítani a left helyett):

1
2
3
4
5
6
7
8
#reklam {
	width: 100px;
	height: 50px;
	position: absolute;
	background-color: #000000;
	right: 10px;
	top: 10px;
	}

A működő kód megtekintése: absolute_pozicionalas.html

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét