Position - CSS-Tricks | CSS-Almanach 2025

Die positionEigenschaft kann Ihnen dabei helfen, die Position eines Elements zu ändern, zum Beispiel:

.element ( position: relative; top: 20px; )

In Bezug auf seine ursprüngliche Position wird das obige Element nun um 20 Pixel von oben nach unten gedrückt. Wenn wir diese Eigenschaften animieren, können wir sehen, wie viel Kontrolle dies uns gibt (obwohl dies aus Leistungsgründen keine gute Idee ist):

relativeist nur einer von sechs Werten für die positionEigenschaft. Hier sind die anderen:

Werte

static: Jedes Element hat standardmäßig eine statische Position, sodass das Element beim normalen Seitenfluss bleibt. Wenn also ein linker / rechter / oberer / unterer / Z-Index festgelegt ist, hat dies keine Auswirkungen auf dieses Element.
relative: Die ursprüngliche Position eines Elements bleibt genau wie der staticWert im Fluss des Dokuments . Aber jetzt funktioniert left / right / top / bottom / z-index. Die Positionseigenschaften „schubsen“ das Element von der ursprünglichen Position in diese Richtung.
absolute: Das Element wird aus dem Fluss des Dokuments entfernt, und andere Elemente verhalten sich so, als ob es nicht einmal vorhanden wäre, während alle anderen Positionseigenschaften daran arbeiten.
fixed: Das Element wird wie absolut positionierte Elemente aus dem Dokumentfluss entfernt. Tatsächlich verhalten sie sich fast gleich, nur fest positionierte Elemente sind immer relativ zum Dokument, nicht zu einem bestimmten übergeordneten Element, und werden durch das Scrollen nicht beeinflusst.
sticky(experimentell): Das Element wird wie ein relativeWert behandelt , bis die Bildlaufposition des Ansichtsfensters einen bestimmten Schwellenwert erreicht. An diesem Punkt nimmt das Element eine fixedPosition ein, an der es aufgefordert wird, zu bleiben.
inherit: Der positionWert kaskadiert nicht, daher kann dies verwendet werden, um ihn spezifisch zu erzwingen, und inheritder Positionierungswert von seinem übergeordneten Wert.

Absolut

Wenn ein untergeordnetes Element einen absoluteWert hat, verhält sich das übergeordnete Element so, als ob das untergeordnete Element überhaupt nicht vorhanden wäre:

.element ( position: absolute; )

Wenn wir versuchen, andere Werte wie left, festzulegen bottom, werden rightwir feststellen, dass das untergeordnete Element nicht auf die Dimensionen seines übergeordneten Elements reagiert, sondern auf das Dokument:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Um das untergeordnete Element absolut von seinem übergeordneten Element zu positionieren, müssen wir dies für das übergeordnete Element selbst festlegen:

.parent ( position: relative; )

Jetzt Eigenschaften wie left, right, bottomund topauf das übergeordnete Element beziehen, so dass , wenn sie das Kind Element transparent machen wir es richtig am Boden des Mutter sitzen sehen:

Fest

Der fixedWert ähnelt dem Wert, absolutemit dem Sie ein Element an einer beliebigen Stelle relativ zum Dokument positionieren können. Dieser Wert wird jedoch durch das Scrollen nicht beeinflusst. Sehen Sie sich das untergeordnete Element in der Demo unten an und wie es nach dem Scrollen weiterhin am Ende der Seite bleibt:

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom	Feuerfuchs	IE	Kante	Safari
4	2	7	12	3.1

Handy / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Klebrig

Der stickyWert ist wie ein Kompromiss zwischen den Werten relativeund fixed. Zum jetzigen Zeitpunkt handelt es sich um einen experimentellen Wert, was bedeutet, dass er nicht Teil der offiziellen Spezifikation ist und nur teilweise von ausgewählten Browsern übernommen wird. Mit anderen Worten, es ist wahrscheinlich nicht die beste Idee, dies auf einer Live-Produktionswebsite zu verwenden.

Was tut es? Nun, es ermöglicht Ihnen, ein Element relativ zu irgendetwas im Dokument zu positionieren und dann, sobald ein Benutzer über einen bestimmten Punkt im Ansichtsfenster gescrollt hat, die Position des Elements an dieser Position zu fixieren, damit es dauerhaft wie ein Element mit einem angezeigt wird fixedWert.

Nehmen Sie das folgende Beispiel:

.element ( position: sticky; top: 50px; )

Das Element wird relativ positioniert, bis die Bildlaufposition des Ansichtsfensters einen Punkt erreicht, an dem sich das Element 50pxvom oberen Rand des Ansichtsfensters befindet. Zu diesem Zeitpunkt wird das Element klebrig und bleibt an einer fixedPosition 50pxoben auf dem Bildschirm.

Die folgende Demo zeigt den Punkt, an dem die obere Navigation die Standardpositionierung ist relativeund die zweite Navigation stickyganz oben im Ansichtsfenster eingestellt ist. Bitte beachten Sie, dass die Demo zum Zeitpunkt des Schreibens nur in Chrome, Safari und Opera funktioniert.

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.