Relatív pozicionálás elemek CSS-ben

A relatív pozicionálás a position tulajdonság relative értékével adható meg. Ez a pozicionálás lehetővé teszi az elemek eltolását a jelenlegi helyzetükhöz képest egy megadott mértékkel. Eközben a weboldal összes többi eleme úgy viselkedik, mintha az elem az eredeti helyén állna. Vagyis ez a pozicionálási típus nem veszi ki az elemet a normál folyóból.

Az eltolásokat a jelenlegi helyzettől a top, right, bottom és left tulajdonságok határozzák meg.

Példa

Kezdetként készítsünk két blokkot pozicionálás nélkül:

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

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

Példa

Most adjuk hozzá az első blokkhoz a relative-t. Ettől egyelőre semmi sem fog változni, mivel még nem adtunk meg eltolást a blokknak:

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

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

Példa

Most toljuk el a blokkunkat 30px-nyire felülről, a top tulajdonság megadásával. Eközben az összes többi elem úgy fog viselkedni, mintha a blokkunk az eredeti helyén maradt volna:

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

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

Példa

Toljuk el a blokkunkat 40px-nyire balról is, a left tulajdonság megadásával:

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

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

Példa

A top, right, bottom és left tulajdonságok negatív értékei az ellenkező irányba tolnak. Például a top pozitív értéke lefelé tol, a negatív pedig felfelé.

Toljuk el a második blokkunkat 40px-nyire felfelé, a top tulajdonság negatív értékének megadásával:

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

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Gyakorlati feladatok

Adottak a következő blokkok:

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

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Tolja el ezeket a blokkokat relatív pozicionálással a következő módon: