Positionen
Statisch
Die statische Position ist die Standardposition für jedes HTML-Element. Elemente mit dieser Position werden entsprechend dem normalen Fluss des Dokuments angeordnet. Sie werden nicht von den Eigenschaften top, bottom, left und right beeinflusst.
Relativ
Die relative Position verschiebt ein Element von seiner normalen Position. Sie können die Eigenschaften top, bottom, left und right verwenden, um die Position des Elements in Bezug auf seine normale Position anzupassen. Diese Anpassung wirkt sich nicht auf andere Elemente aus, da der ursprüngliche Platz immer für das Element reserviert ist.
Beispiel relativ & absolut
Sie können die Parameter left und top der Klassen .relative und .absolute ändern, um zu verstehen, wie die Elemente interagieren.
Absolute
Die absolute Position positioniert ein Element relativ zu seinem ersten positionierten Vorfahren (Elternteil mit einer anderen Position als static) oder relativ zum Dokument selbst (body), wenn kein Vorfahre positioniert ist. Dies ermöglicht es, Elemente zu erstellen, die andere Elemente überlagern können.
Die Eigenschaften top, bottom, left und right werden verwendet, um die absolute Position zu definieren. Im Gegensatz zur relativen Position wird das Element seinen ursprünglichen Platz im Stream verlieren.
Beispiel relativ & absolut
Sie können die Parameter left und top der Klassen .relative und .absolute ändern, um zu verstehen, wie die Elemente interagieren.
Sticky
Die Position sticky ist eine Art Kombination aus relativ und fixed. Das Element wird entsprechend der Scrollposition der Seite positioniert. Es verhält sich wie eine relative Position, bis Sie einen bestimmten Scrollpunkt erreichen, dann verhält es sich wie eine fixe Position.
In der Sticky-Position wird das Element dem Scrollvorgang folgen, indem es am oberen Rand seines Containers eingefroren bleibt. Die Eigenschaft top ist obligatorisch, damit dieser funktioniert.
Fixed
Die feste Position positioniert ein Element relativ zum Browserfenster. Dieses Element bleibt auch dann an derselben Position, wenn Sie auf der Seite scrollen. Das ist nützlich für Elemente wie Navigationsleisten, die immer sichtbar bleiben sollen.
Zusammenfassend
- Static => Grundstellung
- Relative => behält seine ursprüngliche Position im Stream bei.
- Absolute => verliert seine ursprüngliche Position im Stream.
- Sticky => folgt dem Scroll und bleibt auf dem Container fixiert.
- Fixed => bleibt im Viewport eingefroren.