Absolute Positionierung von Elementen in CSS

In dieser Lektion werden wir die absolute Positionierung von Elementen behandeln. Sie erlaubt es, Elemente an angegebenen Koordinaten der Seite zu platzieren. Zum Beispiel kann man ein Element an der Position 100px vom oberen Seitenrand und 200px vom linken Seitenrand platzieren. Das Element bewegt sich dorthin, ungeachtet dessen, was sich dort befindet, und legt sich einfach über die anderen Elemente. Man sagt, dass das Element dabei aus dem normalen Fluss des Dokuments fällt: alle anderen Elemente verhalten sich so, als ob unser Element nicht existiert.

Um ein Element absolut zu positionieren, muss diesem Element die Eigenschaft position mit dem Wert absolute zugewiesen werden. Zusätzlich zu dieser Eigenschaft werden noch zwei weitere benötigt: eine gibt die Koordinate in der Vertikalen an, die andere - in der Horizontalen.

Für die Vertikale muss ein Abstand entweder von oben oder von unten angegeben werden. Der Abstand von oben wird durch die Eigenschaft top festgelegt, der Abstand von unten - durch die Eigenschaft bottom. Für die Horizontale muss ein Abstand entweder von links oder von rechts angegeben werden. Der Abstand von links wird durch die Eigenschaft left festgelegt, der Abstand von rechts - durch die Eigenschaft right.

Schauen wir uns Beispiele an.

Beispiel

Lassen Sie uns zunächst einfach zwei Blöcke erstellen ohne Positionierung (beachten Sie, dass die Elemente nicht am Fensterrand anliegen, da body standardmäßig einen margin hat):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Beispiel

Weisen wir nun dem grünen Block eine absolute Positionierung zu, indem wir ihn an die Position 150px von oben und 100px von links setzen:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Beispiel

Setzen wir nun den grünen Block an die Position 0px von oben und 0px von links:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Beispiel

Setzen wir nun den grünen Block an die Position 0px von oben und 0px von rechts:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Beispiel

Setzen wir nun den grünen Block an die Position 0px von unten und 0px von rechts:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Beispiel

Setzen wir nun den grünen Block an die Position 0px von unten und 0px von links:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Praktische Aufgaben

Platzieren Sie mithilfe der absoluten Positionierung die Blöcke wie folgt: