CSS-Positionierung: Ein umfassender Leitfaden
April 16, 2017
In CSS wird jedes HTML-Element als rechteckige Box behandelt (das CSS-Box-Modell). Standardmäßig ordnet der Browser diese Boxen nach festen Regeln an, dem sogenannten normalen Dokumentenfluss (Normal Flow). Block-Elemente beginnen auf einer neuen Zeile, während Inline-Elemente im Textfluss fließen.
Mit der position-Eigenschaft können Sie diesen Standardfluss überschreiben und Elemente präzise auf der Seite platzieren.
1. Die Positionierungswerte im Überblick
Eine Änderung des Positionierungswerts (weg vom Standard static) macht ein Element zu einem positionierten Element. Erst dann haben die Offset-Eigenschaften (top, right, bottom, left) sowie der z-index eine Wirkung.
| Wert | Beschreibung | Im normalen Fluss? | Erlaubt Offsets? |
|---|---|---|---|
static | Standard: Das Element wird gemäß dem normalen Dokumentenfluss platziert. | Ja | Nein |
relative | Relativ: Das Element wird relativ zu seiner ursprünglichen Position im normalen Fluss verschoben. Andere Elemente verhalten sich so, als wäre es nicht verschoben worden. | Ja | Ja |
absolute | Absolut: Das Element wird relativ zu seinem nächsten positionierten Eltern-Element platziert und aus dem normalen Fluss entfernt. | Nein | Ja |
fixed | Fixiert: Ähnlich wie absolute, aber das Element wird relativ zum Browserfenster (Viewport) positioniert und bewegt sich beim Scrollen nicht mit. | Nein | Ja |
sticky | Klebrig: Das Element verhält sich wie relative, bis eine bestimmte Scroll-Position erreicht ist, und wird dann "klebrig" (wie fixed). | Ja | Ja |
2. Die Offset-Eigenschaften (top, right, bottom, left)
Diese Eigenschaften bestimmen, wie weit ein positioniertes Element von seinen Referenzgrenzen verschoben werden soll. Sie bewegen das Element weg von der angegebenen Seite.
top: 10px;verschiebt das Element um 10px nach unten (weg von oben).left: 20px;verschiebt das Element um 20px nach rechts (weg von links).
3. Vertiefung der Positionierungsmodi
relative (Relativ)
Das Element bleibt im normalen Dokumentenfluss. Der Platz, den es ursprünglich eingenommen hat, bleibt reserviert. Es dient außerdem als Ankerpunkt (Bezugspunkt) für alle seine absolut positionierten Kind-Elemente.
.box-relative {
position: relative;
top: 20px;
left: 50px;
background-color: lightblue;
}
absolute (Absolut)
Das Element wird vollständig aus dem normalen Dokumentenfluss entfernt. Andere Elemente ignorieren seine Existenz und nehmen seinen Platz ein. Seine Position wird relativ zum nächsten positionierten Eltern-Element (also einem Eltern-Element mit einem anderen Wert als static, meist relative) berechnet.
.parent-container {
position: relative; /* Dient als Ankerpunkt */
padding: 20px;
}
.child-absolute {
position: absolute;
top: 10px;
right: 10px;
/* Die Größe wird durch den Inhalt bestimmt, sofern nicht explizit definiert */
width: 100px;
}
Wichtig: Wenn kein positioniertes Eltern-Element existiert, wird das Element relativ zum <body> positioniert. Absolut positionierte Elemente verlieren ihre Block-Eigenschaften; ihre Breite passt sich standardmäßig dem Inhalt an.
fixed (Fixiert)
Das Element wird relativ zum Browserfenster (Viewport) positioniert. Es bleibt beim Scrollen an seiner exakten Position auf dem Bildschirm haftbar. Wie absolute wird es aus dem normalen Fluss entfernt.
.navigation-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 1000; /* Stellt sicher, dass die Leiste über anderen Inhalten liegt */
}
Praxis-Hinweis: Da das fixierte Element den normalen Fluss verlässt, müssen Sie oft dem nachfolgenden Element ein entsprechendes padding-top geben, damit der Inhalt nicht von der fixierten Leiste verdeckt wird.
Vergleichstabelle: absolute vs. fixed
| Eigenschaft | absolute | fixed |
|---|---|---|
| Bezugspunkt | Nächstes positioniertes Eltern-Element | Das Browserfenster (Viewport) |
| Scroll-Verhalten | Bewegt sich mit dem Dokument beim Scrollen | Bleibt fest an seiner Position auf dem Bildschirm |
| Verwendung | Tooltips, Overlays, interne Positionierung | Navigationsleisten, "Nach oben"-Buttons |
Fazit
Die CSS-Positionierung ist ein mächtiges Werkzeug, erfordert aber ein klares Verständnis des Box-Modells und des Dokumentenflusses. Die Kombination von position: relative auf dem Eltern-Element und position: absolute auf dem Kind-Element ist eines der am häufigsten verwendeten Layout-Muster im modernen Webdesign.