Welche Positionierungsoptionen gibt es in CSS?

Es gibt mehrere Hauptoptionen für die Positionierung von Elementen in CSS:

• static — Standardpositionierung. Elemente werden im Dokumentenfluss platziert, ohne Verschiebung.
• relative — Das Element wird relativ zu seiner normalen Position positioniert. Es kann mit top, left, bottom, right verschoben werden, bleibt aber im Fluss.
• absolute — Das Element wird relativ zum nächsten Vorfahren mit einer anderen Position als static positioniert (oder relativ zum Fenster, wenn keine vorhanden sind). Es verlässt den Fluss.
• fixed — Das Element ist relativ zum Browserfenster fixiert und bewegt sich beim Scrollen nicht. Es verlässt ebenfalls den Fluss.
• sticky — Das Element verhält sich wie relative bis zu einer bestimmten Scroll-Position, danach wie fixed.

Neben der Positionierung werden oft folgende Layout-Methoden verwendet:

• Flexbox — flexibles Modell zur Ausrichtung und Verteilung des Raums zwischen Elementen in einer einzigen Dimension (Zeile oder Spalte).
• Grid — zweidimensionales Rastermodell zur Anordnung von Elementen in Zeilen und Spalten.
• float — veraltete Methode zum Umfließen von Elementen, früher für Spalten verwendet, heute weniger üblich.

Beispiel für die Verwendung von position:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}