Relatives Positionieren von Elementen in CSS

Relatives Positionieren wird mit dem Wert relative für die Eigenschaft position festgelegt. Diese Art der Positionierung ermöglicht es, Elemente relativ zu ihrer aktuellen Position um einen bestimmten Wert zu verschieben. Dabei gehen alle anderen Elemente der Seite davon aus, dass sich das Element noch an seiner ursprünglichen Position befindet. Das bedeutet, dass bei dieser Art der Positionierung das Element nicht aus dem normalen Fluss entfernt wird.

Verschiebungen von der aktuellen Position werden durch die Eigenschaften top, right, bottom und left festgelegt.

Beispiel

Lassen Sie uns zunächst einfach zwei Blöcke erstellen ohne Positionierung:

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

Beispiel

Fügen wir nun dem ersten Block relative hinzu. Davon ändert sich vorerst nichts, da wir keine Verschiebung des Blocks angegeben haben:

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

Beispiel

Lassen Sie uns nun unseren Block um 30px von oben verschieben, indem wir ihm die Eigenschaft top zuweisen. Dabei werden sich alle anderen Elemente so verhalten, als ob unser Block an der Stelle geblieben wäre, an der er ursprünglich war:

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

Beispiel

Lassen Sie uns unseren Block auch um 40px von links verschieben, indem wir ihm die Eigenschaft left zuweisen:

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

Beispiel

Negative Werte der Eigenschaften top, right, bottom und left verschieben in die entgegengesetzte Richtung. Beispielsweise verschiebt ein positiver Wert top nach unten, ein negativer - nach oben.

Lassen Sie uns unseren zweiten Block um 40px nach oben verschieben, indem wir ihm einen negativen Wert der Eigenschaft top zuweisen:

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

Praktische Aufgaben

Gegeben sind die folgenden Blöcke:

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

Verschieben Sie diese Blöcke mithilfe von relativem Positionieren wie folgt: