Positionierung relativ zum Elternelement in CSS

Wenn einem Element relative zugewiesen wird und seinem Nachfahren - absolute, dann wird sich dieser Nachfahre relativ zu seinem Elternelement positionieren, und nicht relativ zum Browserfenster.

In der Regel wird in einem solchen Fall dem Elternelement relative ohne Versätze zugewiesen. In diesem Fall passiert mit diesem Elternelement nichts, aber alle seine Nachfahren werden sich nun relativ zu ihm positionieren.

Schauen wir uns Beispiele an.

Beispiel

Lassen Sie uns zunächst einfach einen Eltern-Block und einen Kinder-Block ohne Positionierung erstellen:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Beispiel

Lassen Sie uns nun den grünen Block absolut positionieren. Da dem Elternelement kein relative zugewiesen wurde, wird der Nachfahre relativ zum Browserfenster positioniert:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Beispiel

Weisen wir nun dem Elternelement relative zu. In diesem Fall wird der Nachfahre relativ zu seinem Elternelement positioniert:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: relative;
	width: 500px;
	height: 300px;
	margin: 0 auto;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 20px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Praktische Aufgaben

In den folgenden Aufgaben wird der Hauptblock mittig mit margin auf den Wert auto zentriert, und die anderen werden relativ zu ihm mit der Eigenschaft position positioniert.