Relatiewe posisionering van elemente in CSS

Relatiewe posisionering word ingestel met die waarde relative vir die eienskap position. Hierdie tipe posisionering laat toe om elemente te skuif relatief tot hul huidige posisie met 'n gegewe afstand. Terselfdertyd sal alle ander elemente op die bladsy dink dat die element steeds is waar dit oorspronklik was. Dit wil sê met hierdie tipe posisionering val die element nie uit die normale vloei nie.

Verskuiwings vanaf die huidige posisie word ingestel deur die eienskappe top, right, bottom en left.

Voorbeeld

Laat ons eers twee blokke sonder posisionering maak:

<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;
}

Voorbeeld

Laat ons nou vir die eerste blok relative byvoeg. Dit sal niks verander nie, aangesien ons nie 'n verskuiwing vir die blok gespesifiseer het nie:

<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;
}

Voorbeeld

Laat ons nou ons blok met 30px van bo af skuif deur die eienskap top te spesifiseer. Met dit sal alle ander elemente optree asof ons blok steeds op die plek is waar dit oorspronklik was:

<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;
}

Voorbeeld

Laat ons ook ons blok met 40px van links af skuif deur die eienskap left te spesifiseer:

<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;
}

Voorbeeld

Negatiewe waardes van die eienskappe top, right, bottom en left skuif in die teenoorgestelde rigting. Byvoorbeeld, 'n positiewe waarde van top skuif afwaarts, en 'n negatiewe een - opwaarts.

Laat ons ons tweede blok met 40px opwaarts skuif deur 'n negatiewe waarde van die eienskap top te spesifiseer:

<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;
}

Praktiese take

Die volgende blokke word gegee:

<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;
}

Skuif hierdie blokke met behulp van relatiewe posisionering soos volg: