Relativ positionering af elementer i CSS

Relativ positionering indstilles med værdien relative for egenskaben position. Denne type positionering tillader at flytte elementer i forhold til deres nuværende position med en given afstand. Samtidig vil alle andre elementer på siden opfatte, at elementet stadig befinder sig der, hvor det oprindeligt var. Det vil sige, at med denne type positionering forlader elementet ikke den normale flow.

Forskydninger fra den nuværende position indstilles med egenskaberne top, right, bottom og left.

Eksempel

Lad os starte med blot at oprette to blokke uden 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;
}

Eksempel

Lad os nu tilføje relative til den første blok. Intet vil ændre sig endnu, fordi vi ikke har angivet en forskydning af blokken:

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

Eksempel

Lad os nu flytte vores blok 30px nedefra, ved at angive egenskaben top. Mens alle andre elementer vil opføre sig som om vores blok forblev på det sted, hvor den oprindeligt 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;
}

Eksempel

Lad os også flytte vores blok 40px til venstre, ved at angive egenskaben 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;
}

Eksempel

Negative værdier for egenskaberne top, right, bottom og left flytter i den modsatte retning. For eksempel flytter en positiv værdi for top nedad, mens en negativ værdi flytter opad.

Lad os flytte vores anden blok 40px opad, ved at give den en negativ værdi for egenskaben 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;
}

Praktiske opgaver

Følgende blokke er givet:

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

Forskyd disse blokke ved hjælp af relativ positionering på følgende måde: