Bei der Entwicklung moderner Webquellen treten häufig folgende Aufgaben auf: Anzeige eines beschreibenden Textes über der Produktkarte; Öffnen einer Popup-Nachricht; Darstellung eines modalen Fensters sowie eine benutzerfreundliche Anzeige des mobilen Menüs. Zur Umsetzung all dieser Ziele wird die Eigenschaft position verwendet.

position: static | relative | absolute | fixed | sticky

Die Eigenschaft position wird verwendet, um die Positionierung eines Elements zu verändern. Standardmäßig besitzen alle Elemente position: static. Sobald der Eigenschaft position ein anderer Wert zugewiesen wird, können zusätzlich die Eigenschaften top, left, right und bottom genutzt werden, um ein Element nach den eigenen Anforderungen zu positionieren. Wir werden alle diese Möglichkeiten im Folgenden betrachten.

Standardmäßiger Dokumentenfluss

Der standardmäßige Dokumentenfluss beschreibt, wie Elemente auf einer Webseite angeordnet werden, ohne dass spezielle Positionierungsanweisungen angewendet werden. Die Elemente werden in der Reihenfolge dargestellt, in der sie im HTML-Markup erscheinen.

Hinweis

Es wird empfohlen, alle Elemente im standardmäßigen Dokumentenfluss zu belassen, außer in Situationen, in denen eine Positionierung für dekorative Zwecke oder zur Realisierung bestimmter Funktionalitäten wie Pop-ups, modale Fenster, Dropdown-Menüs, mobile Menüs usw. erforderlich ist.