position

Die Eigenschaft position kann Ihnen helfen, die Position eines Elements zu manipulieren, zum Beispiel

.element {
  position: relative;
  top: 20px;
}

Relativ zu seiner ursprünglichen Position wird das obige Element nun um 20 Pixel von oben nach unten verschoben. Wenn wir diese Eigenschaften animieren würden, könnten wir sehen, wie viel Kontrolle uns das gibt (obwohl dies aus Leistungsgründen keine gute Idee ist)

relative ist nur einer von sechs Werten für die Eigenschaft position. Hier sind die anderen

Werte

• static: Jedes Element hat standardmäßig eine statische Position, sodass das Element dem normalen Seitenfluss folgt. Wenn also ein left/right/top/bottom/z-index gesetzt ist, hat dies keine Auswirkung auf dieses Element.
• relative: Die ursprüngliche Position eines Elements bleibt im Dokumentfluss, genau wie der static-Wert. Aber jetzt funktionieren left/right/top/bottom/z-index. Die Positions-Eigenschaften "stoßen" das Element von der ursprünglichen Position in diese Richtung.
• absolute: Das Element wird aus dem Dokumentfluss entfernt und andere Elemente verhalten sich so, als wäre es nicht vorhanden, während alle anderen Positions-Eigenschaften auf es angewendet werden.
• fixed: Das Element wird aus dem Dokumentfluss entfernt, wie absolut positionierte Elemente. Tatsächlich verhalten sie sich fast gleich, nur fest positionierte Elemente sind immer relativ zum Dokument, nicht zu einem bestimmten Elternteil, und werden vom Scrollen nicht beeinflusst.
• sticky: Das Element wird wie ein relative-Wert behandelt, bis die Scroll-Position des Viewports einen bestimmten Schwellenwert erreicht, an dem das Element eine fixed-Position einnimmt, wo es "kleben" soll.
• inherit: Der position-Wert wird nicht vererbt, daher kann dies verwendet werden, um ihn explizit zu erzwingen und den Positionierungswert vom übergeordneten Element zu übernehmen.

Absolut

Wenn ein Kindelement den Wert absolute hat, verhält sich das Eltern-Element so, als ob das Kind gar nicht da wäre.

.element {
  position: absolute;
}

Und wenn wir versuchen, andere Werte wie left, bottom und right zu setzen, stellen wir fest, dass das Kindelement nicht auf die Abmessungen seines Elternteils, sondern auf die des Dokuments reagiert.

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

Damit das Kindelement absolut vom Elternteil positioniert wird, müssen wir dies auf dem Elternteil selbst einstellen.

.parent {
  position: relative;
}

Nun beziehen sich Eigenschaften wie left, right, bottom und top auf das Elternteil, sodass, wenn wir das Kindelement transparent machen, wir es direkt am unteren Rand des Elternteils sitzen sehen können.

Erfahren Sie mehr über position: relative und position: absolute bei DigitalOcean.

Fest

Der Wert fixed ähnelt absolute, da er Ihnen helfen kann, ein Element beliebig relativ zum Dokument zu positionieren. Dieser Wert wird jedoch vom Scrollen nicht beeinflusst. Sehen Sie das Kindelement in der folgenden Demo und wie es nach dem Scrollen am unteren Rand der Seite klebt.

Haftend

Der Wert sticky ist wie ein Kompromiss zwischen den Werten relative und fixed. Zum Zeitpunkt der Erstellung dieses Textes ist dies noch ein experimenteller Wert, was bedeutet, dass er nicht Teil der offiziellen Spezifikation ist und nur teilweise von ausgewählten Browsern unterstützt wird. Mit anderen Worten, es ist wahrscheinlich keine gute Idee, dies auf einer Live-Produktionswebsite zu verwenden.

Was macht es? Nun, es ermöglicht Ihnen, ein Element relativ zu allem im Dokument zu positionieren und dann, sobald ein Benutzer einen bestimmten Punkt im Viewport überschritten hat, die Position des Elements an dieser Stelle zu fixieren, sodass es dauerhaft angezeigt wird wie ein Element mit einem fixed-Wert.

Nehmen Sie das folgende Beispiel

.element {
  position: sticky; top: 50px;
}

Das Element wird relativ positioniert, bis die Scroll-Position des Viewports einen Punkt erreicht, an dem das Element 50px vom oberen Rand des Viewports entfernt ist. Zu diesem Zeitpunkt wird das Element "sticky" und behält eine fixed-Position 50px vom oberen Bildschirmrand.

Die folgende Demo veranschaulicht diesen Punkt, bei dem die obere Navigation standardmäßig relative positioniert ist und die zweite Navigation am oberen Rand des Viewports auf sticky eingestellt ist. Bitte beachten Sie, dass die Demo zum Zeitpunkt der Erstellung nur in Chrome, Safari und Opera funktioniert.

Erfahren Sie mehr über position: sticky bei DigitalOcean.

Weitere Informationen