Oben / unten / links / rechts - CSS-Tricks

Die top, bottom, leftund rightEigenschaften werden mit der Position verwendet , um die Platzierung eines Elements einzustellen. Sie wirken sich nur auf positionierte Elemente aus, bei denen es sich um Elemente handelt, deren positionEigenschaft auf etwas anderes als festgelegt ist static. Zum Beispiel: relative, absolute, fixed, oder sticky.

div ( : || || auto || inherit; )

Sie können es beispielsweise verwenden, um ein Symbol an seinen Platz zu bringen:

button .icon ( position: relative; top: 1px; )

Oder positionieren Sie ein spezielles Element in einem Container.

.container ( position: relative; ) .container header ( position: absolute; top: 0; )

Der Wert für top, bottom, leftund rightkann eine der folgenden sein:

• eine der gültigen Längen von CSS
• ein Prozentsatz der Höhe (für topund bottom) oder Breite (für leftund right) des enthaltenen Elements
• auto
• inherit

Das Element bewegt sich im Allgemeinen von einer bestimmten Seite weg, wenn sein Wert positiv ist, und zu ihr hin, wenn der Wert negativ ist. Im folgenden Beispiel topbewegt eine positive Länge für das Element nach unten (von oben weg) und eine negative Länge für topdas Element nach oben (nach oben):

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

Position

Die Platzierung eines Element mit einem Wert für top, bottom, left, oder righthängt von seinem Wert für position. Lassen Sie uns einen Blick darauf werfen, was passiert, wenn wir denselben Wert für topElemente mit unterschiedlichen Werten für festlegen position.

static

Die topEigenschaft hat keine Auswirkung auf nicht positionierte Elemente (Elemente mit der positionEinstellung auf static). So werden Elemente standardmäßig positioniert. Sie können position: static;als eine Methode verwenden, um die Auswirkung topauf ein Element rückgängig zu machen .

relative

Wenn topfür ein Element mit der positionEinstellung auf festgelegt wird relative, wird das Element in Bezug auf seine ursprüngliche Platzierung im Dokument nach oben oder unten verschoben.

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

absolute

Wenn topein Element mit dem positionWert auf festgelegt ist absolute, bewegt sich das Element in Bezug auf seinen am nächsten positionierten Vorfahren (oder das Dokument, wenn keine positionierten Vorfahren vorhanden sind) nach oben oder unten.

In dieser Demo befindet sich das rosa Feld links 50 Pixel unter dem oberen Rand der Seite, da keine Ahnenelemente positioniert sind. Das rosa Feld auf der rechten Seite befindet sich 50 Pixel nach unten von der Oberseite des übergeordneten Elements, da das übergeordnete Element ein positionvon hat relative.

Siehe das
Stiftoberteil: absolut von Matsuko Friedland (@missmatsuko)
auf CodePen.

fixed

Wenn topfür ein Element mit der positionEinstellung auf festgelegt ist fixed, wird das Element in Bezug auf das Ansichtsfenster des Browsers nach oben oder unten verschoben.

Siehe Stiftoberseite
: behoben durch CSS-Tricks (@ css-Tricks)
auf CodePen.

Auf den ersten Blick scheint es keinen Unterschied zwischen absoluteund zu geben fixed. Der Unterschied wird sichtbar, wenn Sie sie auf einer Seite vergleichen, deren Inhalt zum Scrollen ausreicht. Wenn Sie nach unten scrollen, wird das fixedPositionselement immer angezeigt, während das absolutePositionselement wegrollt.

Siehe das
Scrollen mit dem Stift :
Fixiert gegen Absolut durch CSS-Tricks (@ css-Tricks) auf CodePen.

sticky

Wenn topfür ein Element mit der positionEinstellung auf festgelegt ist sticky, bewegt sich das Element in Bezug auf den nächsten Vorfahren mit einem Bildlauffeld (oder dem Ansichtsfenster, wenn kein Vorfahr ein Bildlauffeld hat) nach oben oder unten, begrenzt auf die Grenzen seines enthaltenen Elements.

Das Festlegen topeines stickypositionierten Elements macht nur dann viel, wenn sein Container größer als er ist und Sie über genügend Inhalt zum Scrollen verfügen. Wie bei fixedbleibt das Element beim Scrollen im Blick. Im Gegensatz dazu fixedfällt das Element aus dem Blickfeld, sobald es die Ränder seines enthaltenen Elements erreicht.

Siehe das
Scrollen mit dem Stift : behoben oder klebrig durch CSS-Tricks (@ css-Tricks)
auf CodePen.

Fallstricke

Gegenüberliegende Seiten einstellen

Sie können einen Wert für jede gesetzt top, bottom, left, und rightauf einem einzigen Element. Wenn Sie Werte für gegenüberliegende Seiten ( topund bottom, oder leftund right) festlegen , entspricht das Ergebnis möglicherweise nicht immer Ihren Erwartungen.

In den meisten Fällen bottomwird ignoriert, wenn topbereits festgelegt, und rightignoriert, wenn leftbereits festgelegt. Wenn die Richtung auf rtl(von rechts nach links) eingestellt ist, leftwird statt ignoriert right. Damit jeder Wert eine Wirkung hat, muss das Element positionauf absoluteoder fixedund heightauf auto(Standard) gesetzt sein.

In diesem Beispiel setzen wir top, bottom, left, und rightzu `20px`, und erwarten , dass auf jeder Seite des inneren Kasten von den Seiten des äußeren Kastens sein 20px weg:

Siehe die
Stifteinstellung oben, unten, links und rechts nach CSS-Tricks (@ css-Tricks)
auf CodePen.

Wenn behoben, ist dies nicht relativ zum Ansichtsfenster

Elemente mit der positionEinstellung auf fixedwerden nicht immer in Bezug auf das Ansichtsfenster positioniert. Es wird relativ zu seinem nächsten Vorfahren positioniert, wobei ein transform, perspectiveoder eine filterEigenschaft auf etwas anderes festgelegt ist, als nonewenn eines vorhanden ist.

Platz hinzufügen oder entfernen

Wenn Sie ein Element positioniert haben und festgestellt haben, dass jetzt ein leerer oder nicht genügend Platz vorhanden ist, hat dies möglicherweise damit zu tun, ob sich das Element im Dokumentfluss befindet oder nicht.

Wenn ein Element aus dem Dokumentfluss entfernt wird, verschwindet der ursprünglich auf der Seite belegte Speicherplatz. Dies ist der Fall, wenn ein Element positioniert ist absoluteoder fixed. In diesem Beispiel ist das enthaltende Feld des absolut positionierten Elements reduziert, da das absolut positionierte Element aus dem Dokumentfluss entfernt wurde:

Siehe den
Stiftdokumentfluss 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 topEigenschaft. Nach Belieben verwenden.