Relative Positionierung

Ein relativ positioniertes Element wird, wie der Name schon sagt, relativ zu seinem übergeordneten Element positioniert. Das übergeordnete Element enthält das untergeordnete Element. Dies kann natürlich ein speziell definiertes Element oder die gesamte Seite sein (in diesem Fall ist das Body-Tag wahrscheinlich das übergeordnete Element). Wenn Sie die position -Eigenschaft auf relative festlegen, verhält sich das Element standardmäßig so, als wäre es statisch:

<style type="text/css">
#parent-div {
	background-color: #6c9;
	width: 200px;
	height: 200px;
}

#relative-div {
	background-color: #6495ed;
	position: relative;
	width: 100px;
	height: 100px;
}
</style>

<div id="parent-div">
	<div id="relative-div">

	</div>
</div>

Die wahre Magie beginnt jedoch, wenn Sie die positionsbezogenen Eigenschaften top, bottom, left und right verwenden . Diese sind standardmäßig auf auto eingestellt, was im Grunde dazu führt, dass das Element in der oberen linken Ecke platziert wird. Sie können dies jedoch leicht ändern:

<style type="text/css">
#parent-div {
	background-color: #6c9;
	width: 200px;
	height: 200px;
}

#relative-div {
	background-color: #6495ed;
	position: relative;
	width: 100px;
	height: 100px;
	top: 50px;
	left: 50px;
}
</style>

<div id="parent-div">
	<div id="relative-div">

	</div>
</div>

Beachten Sie, dass das untergeordnete Element jetzt 50 Pixel von oben nach links verschoben wurde. Bei relativ positionierten Elementen geben die Eigenschaften top und left dem Browser an, wie weit unter der gewünschten Normalposition Sie dies wollen, während die bottom und right Eigenschaften dem Browser angeben, wie weit über der normalen Position das Element sein soll. Dies mag zunächst etwas verwirrend sein, vor allem, weil die Eigenschaften in Bezug auf absolut positionierte Elemente logischer funktionieren, aber Sie werden bald den Dreh raus haben.

Dies bedeutet auch, dass Sie negative linke und obere Werte verwenden KÖNNEN, um ein Element von seinem übergeordneten Wert zu entfernen. Dies hat jedoch den gleichen Effekt, als würde dem Element derselbe untere und rechte Wert zugewiesen, in diesem Fall jedoch positive statt negative Zahlen. Schauen Sie sich zur Veranschaulichung die nächsten beiden Beispiele an, in denen ich beide Ansätze verwende und genau das gleiche Ergebnis erreiche:

Verwenden negativer Werte für die linken und oberen Eigenschaften:

<style type="text/css">
#parent-div {
	background-color: #6c9;
	width: 200px;
	height: 200px;
	padding: 10px;
}

#relative-div {
	background-color: #6495ed;
	position: relative;
	width: 200px;
	height: 200px;
	left: -20px;
	top: -20px;
}
</style>

<div id="parent-div">
	<div id="relative-div">

	</div>
</div>

Verwenden Sie stattdessen die Eigenschaften "Unten" (bottom) und "Rechts" (right):

<style type="text/css">
#parent-div {
	background-color: #6c9;
	width: 200px;
	height: 200px;
	padding: 10px;
}

#relative-div {
	background-color: #6495ed;
	position: relative;
	width: 200px;
	height: 200px;
	bottom: 20px;
	right: 20px;
}
</style>

<div id="parent-div">
	<div id="relative-div">

	</div>
</div>

Wie Sie sehen, liegt es ganz bei Ihnen, welche Methode Sie verwenden!

Wie wirkt sich die relative Positionierung auf umgebende Elemente aus?

Das ist eine ausgezeichnete Frage, aber die Antwort ist auch ganz einfach: Es ist nicht so. Wenn ein Browser auf ein relativ positioniertes Element trifft, schiebt er es einfach in die von Ihnen angegebene Richtung (mithilfe der Eigenschaften oben/links oder unten/rechts), weist jedoch nur den Platz zu, den das Element ursprünglich einnehmen sollte. Dies wird mit dem nächsten Beispiel sehr deutlich:

<style type="text/css">
.box {
	background-color: #6c9;
	padding: 20px 10px;
	width: 200px;
}
#relative-div {
	background-color: #6495ed;
	position: relative;
	width: 200px;
	height: 200px;
	left: -10px;
	top: 20px;
}
</style>

<div class="box">Top</div>
<div id="relative-div">
	Relative element
</div>
<div class="box">Bottom</div>

Wir haben jetzt umgebende Elemente, die statische Positionierung verwenden (da dies die Standardposition ist) und in der Mitte ein Element mit einer relativen Position. Wir verwenden die Eigenschaft left und top, um sie vom oberen Element wegzuschieben, und sehen, was passiert: Das Element wird erwartungsgemäß vom oberen Element weggeschoben, das untere Element jedoch nicht, was bedeutet, dass die beiden Elemente weggeschoben werden und sich überlappen. Warum? Da das relativ positionierte Element immer noch nur den Platz beansprucht, den es hätte, wenn es statisch positioniert wäre!

Zusammenfassung

Wie Sie sehen, hat die relative Positionierung sowohl Vor- als auch Nachteile. In Kombination mit der absoluten Positionierung kann dies jedoch noch nützlicher sein, wie wir im nächsten Kapitel sehen werden.