Abszolút pozicionálás CSS-ben

Ebben a leckében az elemek abszolút pozicionálását vizsgáljuk meg. Ez lehetővé teszi az elemek elhelyezését a megadott oldal-koordinátákon. Például egy elem 100px-re elhelyezhető az oldal tetejétől és 200px-ra balra. Az elem oda mozdul, függetlenül attól, hogy más elemek is ott helyezkednek-e el, és egyszerűen rájuk kerül. Általában úgy mondják, hogy ekkor az elem kiesik a dokumentum normál folyásából: az összes többi elem úgy fog viselkedni, mintha a mi elemünk nem is létezne.

Ahhoz, hogy egy elemet abszolútán pozícionáljunk, az elemnek be kell állítani a position tulajdonságot absolute értékre. Ezen tulajdonság mellett további kettőre is szükség van: az egyik a függőleges, a másik a vízszintes koordinátát határozza meg.

A függőleges elhelyezéshez meg kell adni egy margót felülről vagy alulról. A felső margót a top tulajdonság, az alsó margót pedig a bottom tulajdonság határozza meg. A vízszintes elhelyezéshez meg kell adni egy margót balról vagy jobbról. A bal margót a left tulajdonság, a jobb margót pedig a right tulajdonság határozza meg.

Nézzünk példákat.

Példa

Kezdetnek készítsünk két blokkot pozicionálás nélkül (figyeljük meg, hogy az elemek nincsenek az ablak széléhez nyomva, mivel a body-nak alapértelmezetten van margin beállítása):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Példa

Most állítsuk be a zöld blokk abszolút pozicionálását úgy, hogy 150px-re legyen felülről és 100px-ra balról:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Példa

Most helyezzük a zöld blokkot 0px-re felülről és 0px-ra balról:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Példa

Most helyezzük a zöld blokkot 0px-re felülről és 0px-ra jobbról:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Példa

Most helyezzük a zöld blokkot 0px-re alulról és 0px-ra jobbról:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Példa

Most helyezzük a zöld blokkot 0px-re alulról és 0px-ra balról:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Gyakorlati feladatok

Abszolút pozicionálás segítségével helyezze el a blokkokat a következő módon: