Relativ positionering av element i CSS

Relativ positionering sätts med värdet relative för egenskapen position. Denna typ av positionering gör det möjligt att flytta element i förhållande till sin nuvarande position med en given storlek. Samtidigt kommer alla andra element på sidan att bete sig som om elementet fortfarande finns på sin ursprungliga plats. Det vill säga, med denna typ av positionering tas inte elementet bort från det normala flödet.

Förskjutningar från nuvarande position sätts med egenskaperna top, right, bottom och left.

Exempel

Låt oss först skapa två block utan positionering:

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

Exempel

Låt oss nu lägga till relative till det första blocket. Ingenting kommer att förändras ännu, eftersom vi inte har angett någon förskjutning för blocket:

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

Exempel

Låt oss nu flytta vårt block 30px ner från toppen genom att ange egenskapen top. Samtidigt kommer alla andra element att bete sig som om vårt block fortfarande är kvar på den plats där det ursprungligen var:

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

Exempel

Låt oss också flytta vårt block 40px till höger från vänsterkanten, genom att ange egenskapen left:

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

Exempel

Negativa värden för egenskaperna top, right, bottom och left flyttar elementet i motsatt riktning. Till exempel flyttar ett positivt värde för top elementet nedåt, medan ett negativt värde flyttar det uppåt.

Låt oss flytta vårt andra block 40px uppåt genom att ange ett negativt värde för egenskapen top:

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

Praktiska uppgifter

Följande block är givna:

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

Flytta dessa block med hjälp av relativ positionering på följande sätt: