top / bottom / left / right

Die Eigenschaften top, bottom, left und right werden mit position verwendet, um die Platzierung eines Elements festzulegen. Sie wirken sich nur auf positionierte Elemente aus, d. h. auf Elemente, bei denen die Eigenschaft position auf etwas anderes als static gesetzt ist. Zum Beispiel: relative, absolute, fixed oder sticky.

div {
  <top || bottom || left || right>: <length> || <percentage> || auto || inherit;
}

Sie könnten es zum Beispiel verwenden, um ein Symbol an die richtige Stelle zu rücken.

button .icon {
  position: relative;
  top: 1px;
}

Oder um ein besonderes Element innerhalb eines Containers zu positionieren.

.container {
  position: relative;
}
.container header {
  position: absolute;
  top: 0;
}

Der Wert für top, bottom, left und right kann einer der folgenden sein:

• eine der gültigen CSS-Längen
• ein Prozentsatz der Höhe (für top und bottom) oder Breite (für left und right) des enthaltenden Elements
• auto
• inherit

Das Element bewegt sich im Allgemeinen von einer gegebenen Seite weg, wenn sein Wert positiv ist, und auf sie zu, wenn der Wert negativ ist. Im folgenden Beispiel verschiebt eine positive Länge für top das Element nach unten (weg von oben) und eine negative Länge für top verschiebt das Element nach oben (in Richtung von oben).

Siehe den Pen
Top: positive und negative Werte von Matsuko Friedland (@missmatsuko)
auf CodePen.

Position

Die Platzierung eines Elements mit einem Wert für top, bottom, left oder right hängt von seinem Wert für position ab. Schauen wir uns an, was passiert, wenn wir denselben Wert für top auf Elemente mit unterschiedlichen Werten für position setzen.

static

Die Eigenschaft top hat keine Auswirkung auf unpositionierte Elemente (Elemente mit position auf static gesetzt). Dies ist die Standardpositionierung von Elementen. Sie könnten position: static; als eine Methode verwenden, um die Auswirkung von top auf ein Element rückgängig zu machen.

relative

Wenn top auf ein Element mit position auf relative gesetzt wird, bewegt sich das Element relativ zu seiner ursprünglichen Position im Dokument nach oben oder unten.

Siehe den Pen
Top: relative von Matsuko Friedland (@missmatsuko)
auf CodePen.

absolute

Wenn top auf ein Element mit position auf absolute gesetzt wird, bewegt sich das Element relativ zu seinem nächsten positionierten Vorfahren (oder zum Dokument, wenn es keine positionierten Vorfahren gibt) nach oben oder unten.

In dieser Demo ist die pinke Box links 50px vom oberen Rand der Seite entfernt positioniert, da sie keine positionierten Vorfahren hat. Die pinke Box rechts ist 50px vom oberen Rand ihres Elternelements entfernt positioniert, da das Elternelement eine position von relative hat.

Siehe den Pen
Top: absolut von Matsuko Friedland (@missmatsuko)
auf CodePen.

fixed

Wenn top auf ein Element mit position auf fixed gesetzt wird, bewegt sich das Element relativ zum Browser-Viewport nach oben oder unten.

Siehe den Pen
Top: fixed von CSS-Tricks (@css-tricks)
auf CodePen.

Auf den ersten Blick scheint es keinen Unterschied zwischen absolute und fixed zu geben. Der Unterschied ist zu erkennen, wenn man sie auf einer Seite mit genügend Inhalt vergleicht, um zu scrollen. Wenn man nach unten scrollt, bleibt das fixed positionierte Element immer sichtbar, während das absolute positionierte Element wegscrollt.

Siehe den Pen
Scrolling: fixed vs. absolute von CSS-Tricks (@css-tricks)
auf CodePen.

sticky

Wenn top auf ein Element mit position auf sticky gesetzt wird, bewegt sich das Element relativ zum nächsten Vorfahren mit einem scrollbaren Feld (oder zum Viewport, wenn kein Vorfahre ein scrollbares Feld hat) nach oben oder unten, begrenzt durch die Grenzen seines enthaltenden Elements.

Das Setzen von top auf einem sticky positionierten Element bewirkt nicht viel, es sei denn, sein Container ist höher als es selbst und Sie haben genügend Inhalt zum Scrollen. Wie bei fixed bleibt das Element beim Scrollen sichtbar. Im Gegensatz zu fixed fällt das Element aus dem Blickfeld, sobald es die Ränder seines enthaltenden Elements erreicht.

Siehe den Pen
Scrolling: fixed vs. sticky von CSS-Tricks (@css-tricks)
auf CodePen.

Haken und Ösen (Gotchas)

Festlegen gegenüberliegender Seiten

Sie können für jede der Eigenschaften top, bottom, left und right auf einem einzelnen Element einen Wert festlegen. Wenn Sie Werte für gegenüberliegende Seiten (top und bottom oder left und right) festlegen, ist das Ergebnis möglicherweise nicht immer das, was Sie erwarten.

In den meisten Fällen wird bottom ignoriert, wenn top bereits festgelegt ist, und right wird ignoriert, wenn left bereits festgelegt ist. Wenn direction auf rtl (rechts nach links) gesetzt ist, wird left anstelle von right ignoriert. Damit jeder Wert eine Auswirkung hat, muss das Element eine position von absolute oder fixed und eine height von auto (Standard) haben.

In diesem Beispiel setzen wir top, bottom, left und right auf 20px und erwarten, dass jede Seite der inneren Box 20px von den Seiten der äußeren Box entfernt ist.

Siehe den Pen
Festlegen von oben, unten, links und rechts von CSS-Tricks (@css-tricks)
auf CodePen.

Wenn fixed nicht relativ zum Viewport ist

Elemente mit position auf fixed gesetzt, werden nicht immer relativ zum Viewport positioniert. Sie werden relativ zu ihrem nächsten Vorfahren mit einer Eigenschaft transform, perspective oder filter, die auf etwas anderes als none gesetzt ist, positioniert, falls ein solcher existiert.

Hinzufügen oder Entfernen von Abstand

Wenn Sie ein Element positioniert haben und festgestellt haben, dass dort nun ein Leerraum ist oder nicht genügend Platz vorhanden ist, könnte dies damit zusammenhängen, ob sich das Element im oder außerhalb des Dokumentenflusses befindet.

Wenn ein Element aus dem Dokumentenfluss genommen wird, bedeutet dies, dass der Platz, den es ursprünglich auf der Seite eingenommen hat, verschwindet. Dies ist der Fall, wenn ein Element absolute oder fixed positioniert ist. In diesem Beispiel ist die Containerbox des absolut positionierten Elements kollabiert, da das absolut positionierte Element aus dem Dokumentenfluss entfernt wurde.

Siehe den Pen
Dokumentenfluss von Matsuko Friedland (@missmatsuko)
auf CodePen.

Browser-Unterstützung

Sie können einen Blick darauf werfen, aber es gibt keine browserübergreifenden Bedenken für die Eigenschaft top. Nutzen Sie sie nach Belieben.