CSS Position
Die position-Eigenschaft bestimmt, wie ein Element im Dokumentfluss platziert wird. Sie ist eines der wichtigsten Werkzeuge für das Layout und die Feinabstimmung der Anordnung.
Position-Werte
CSS position kann mehrere Werte annehmen, die jeweils unterschiedlich auf das Layout wirken.
| Wert | Beschreibung |
|---|---|
| static | Standardwert. Das Element bleibt im normalen Dokumentfluss. |
| relative | Das Element wird relativ zu seiner normalen Position verschoben, basierend auf top, left, right, bottom. |
| absolute | Das Element wird relativ zum ersten nicht-statischen Elternelement positioniert. |
| fixed | Das Element bleibt relativ zum Browserfenster fixiert und bewegt sich beim Scrollen nicht. |
| sticky | Das Element bleibt beim Scrollen eine Zeit lang fixiert und kehrt dann in den normalen Fluss zurück. |
Absolute Positionierung
Absolute Positionierung ermöglicht es, genau festzulegen, wo ein Element innerhalb des Elternelements platziert wird.
Im obigen Beispiel befindet sich die rote Box in der oberen rechten Ecke der grauen Elternbox.
Sticky-Position
Die Sticky-Position ist nützlich für Navigationsleisten, da das Element beim Scrollen oben auf dem Bildschirm bleibt und später in den Fluss zurückkehrt.
Tipps zur Verwendung von position
Die richtige Verwendung von position ist entscheidend für präzise und responsive Layouts.
- Gib dem Elternteil immer position: relative, wenn du ein absolut positioniertes Kind platzieren willst.
- Verwende fixed vorsichtig, da es Inhalte beim Scrollen überdecken kann.
- Sticky ist besonders nützlich für Navigationsleisten und Header.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
