Bei der Entwicklung moderner Webquellen stoßen wir immer auf folgende Aufgaben: beschreibenden Text über der Produktkarte anzeigen; eine Popup-Nachricht öffnen; ein modales Fenster demonstrieren und natürlich ein bequemes Anzeigen des mobilen Menüs. Um all diese Ziele zu erreichen, verwenden wir die position-Eigenschaft.

position: static | relative | absolute | fixed | sticky

Die Eigenschaft position wird verwendet, um die Positionierung eines Elements zu ändern. Standardmäßig besitzen alle Elemente position: static. Sobald der position-Eigenschaft ein anderer Wert zugewiesen wird, können wir auch die Eigenschaften top, left, right und bottom verwenden, um ein Element nach unseren Anforderungen zu positionieren. Wir werden alle diese weiter betrachten.

Standard-Dokumentfluss

Der Standard-Dokumentfluss beschreibt, wie Elemente auf einer Webseite positioniert werden, ohne dass spezifische Positionierungsanweisungen angewendet werden. Elemente werden in der Reihenfolge angeordnet, in der sie im HTML-Markup erscheinen.

Hinweis

Es wird empfohlen, alle Elemente im Standard-Dokumentfluss zu belassen, außer in Situationen, in denen eine Positionierung für dekorative Zwecke oder zur Erreichung spezifischer Funktionen wie Popups, modale Fenster, Dropdown-Menüs, mobile Menüs usw. erforderlich ist.