CSS top Eigenschaft

Definition und Verwendung

Die top-Eigenschaft legt die obere Kante des Elements fest. Diese Eigenschaft definiert den Abstand zwischen der oberen Außengrenze eines positionierten Elements und der oberen Grenze seines umschließenden Blocks.

Anmerkung:Wenn der Wert der "position"-Eigenschaft "static" ist, hat die Einstellung der "top"-Eigenschaft keine Auswirkung.

Beschreibung

Für statische Elemente ist es auto; für Längenwerte der entsprechende absolute Wert; für prozentuale Werte der angegebene Wert; andernfalls auto.

Für relative Elemente, wenn top und bottom beide auto sind, beträgt der berechnete Wert 0; wenn einer von beiden auto ist, wird der Gegenteil des anderen Werts genommen; wenn beide nicht auto sind, wird bottom den Gegenteil des Werts von top übernehmen.

Weitere Informationen:

CSS-Tutorial:CSS-Positionierung

HTML DOM Referenzhandbuch:top-Eigenschaft

Beispiel

Setzen Sie die obere Kante des Bildes 5 Pixel unter der oberen Kante des umschließenden Elements:

img
  {
  position:absolute;
  top:5px;
  }

Versuchen Sie es selbst

CSS-Syntax

top: auto|length|initial|inherit;

Eigenschaftswert

Wert Beschreibung
auto Standardwert. Die Position der oberen Kante wird durch den Browser berechnet.
% Die obere Position wird in Prozent der Breite des Elements angegeben. Negative Werte sind zulässig.
length Die obere Position des Elements wird mit Einheiten wie px, cm und anderen festgelegt. Negative Werte sind zulässig.
inherit Es wird festgelegt, dass der Wert der top-Eigenschaft vom Elternelement geerbt wird.

Technische Details

Standardwert: auto
Vererbbarkeit: nein
Version: CSS2
JavaScript-Syntax: object.style.top="50px"

Mehr Beispiele

Obere Kante des Bildes mit einem festen Wert einstellen
Dieses Beispiel zeigt, wie man die obere Kante des Bildes mit einem festen Wert einstellt.
Obere Kante des Bildes mit einem Prozentsatzwert einstellen
Dieses Beispiel zeigt, wie man die obere Kante des Bildes mit einem Prozentsatzwert einstellt.

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0