top

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die top CSS-Eigenschaft legt die vertikale Position eines positionierten Elements fest. Diese Inset-Eigenschaft hat keine Wirkung auf nicht-positionierte Elemente.

Probieren Sie es aus

Die Wirkung von top hängt davon ab, wie das Element positioniert ist (d.h. vom Wert der position-Eigenschaft):

Wenn position auf absolute oder fixed gesetzt ist, gibt die top-Eigenschaft den Abstand zwischen dem äußeren Rand der oberen Kante des Elements und dem inneren Rand der oberen Kante seines enthaltenden Blocks an. Im Fall von Anker-positionierten Elementen, wenn die anchor()-Funktion innerhalb des Wertes verwendet wird, relativ zur angegebenen <anchor-side>-Kante. Die top-Eigenschaft ist kompatibel mit den Werten top, bottom, start, end, self-start, self-end, center und <percentage>.
Wenn position auf relative gesetzt ist, gibt die top-Eigenschaft die Entfernung an, um die die obere Kante des Elements unterhalb seiner normalen Position verschoben wird.
Wenn position auf sticky gesetzt ist, wird die top-Eigenschaft zur Berechnung des Sticky-Einschränkungsrechtecks verwendet.
Wenn position auf static gesetzt ist, hat die top-Eigenschaft keine Wirkung.

Wenn sowohl top- als auch bottom-Werte angegeben sind, gibt es drei verschiedene Fälle:

Ist position auf absolute oder fixed gesetzt und height nicht spezifiziert (entweder auto oder 100%), werden sowohl top- als auch bottom-Werte berücksichtigt.
Ist position auf relative gesetzt oder ist height eingeschränkt, hat die top-Eigenschaft Vorrang und die bottom-Eigenschaft wird ignoriert.
Ist position auf sticky gesetzt, werden sowohl top- als auch bottom-Werte berücksichtigt. Das bedeutet, dass sich ein Sticky-Element potenziell innerhalb seines enthaltenden Blocks basierend auf den Werten dieser beiden Eigenschaften nach oben und unten bewegen kann, solange das Positionsfeld des Elements innerhalb seines enthaltenden Blocks bleibt.

Syntax

css

/* <length> values */
top: 3px;
top: 2.4em;
top: anchor(bottom);
top: anchor-size(--myAnchor self-block, 10%);

/* <percentage>s of the height of the containing block */
top: 10%;

/* Keyword value */
top: auto;

/* Global values */
top: inherit;
top: initial;
top: revert;
top: revert-layer;
top: unset;

Werte

<length>

Ein negativer, null oder positiver <length>:

für absolut positionierte Elemente stellt es den Abstand zur oberen Kante des enthaltenden Blocks dar.
für Anker-positionierte Elemente löst die anchor()-Funktion einen <length>-Wert relativ zur Position der oberen oder unteren Kante des zugeordneten Ankerelements aus (siehe Verwendung von Inset-Eigenschaften mit anchor()-Funktionswerten), und die anchor-size()-Funktion löst einen <length>-Wert relativ zur Breite oder Höhe des zugeordneten Ankerelements aus (siehe Festlegen der Elementposition basierend auf Ankergröße).
für relativ positionierte Elemente stellt es den Abstand dar, um den das Element unterhalb seiner normalen Position verschoben wird.

<percentage>

Ein <percentage> der Höhe des enthaltenden Blocks.

auto

Gibt an, dass:

für absolut positionierte Elemente die Position des Elements basierend auf der bottom-Eigenschaft basiert, während height: auto als auf Inhalt basierende Höhe behandelt wird; oder wenn bottom ebenfalls auto ist, wird das Element dort positioniert, wo es sich vertikal befinden sollte, wenn es ein statisches Element wäre.
für relativ positionierte Elemente der Abstand des Elements von seiner normalen Position auf der bottom-Eigenschaft basiert; oder wenn bottom ebenfalls auto ist, wird das Element vertikal überhaupt nicht verschoben.

inherit

Gibt an, dass der Wert derselbe ist wie der berechnete Wert vom übergeordneten Element (das möglicherweise nicht sein enthaltender Block ist). Dieser berechnete Wert wird dann so behandelt, als ob er ein <length>, <percentage> oder das auto-Schlüsselwort wäre.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	positionierte Elemente
Vererbt	Nein
Prozentwerte	bezieht sich auf die Höhe des äußeren Elements
Berechneter Wert	falls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten `auto`
Animationstyp	Längenangabe, Prozentsatz oder `calc()`;

Formale Syntax

top = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

Beispiele

Ein positioniertes Element 10% von oben

css

body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}

html

<div>The size of this content is determined by the position of its edges.</div>

Spezifikationen

Specification
CSS Positioned Layout Module Level 3 # insets

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

bottom, left, und right
inset Kurzschreibweise
inset-block-start, inset-block-end, inset-inline-start, und inset-inline-end
inset-block und inset-inline Kurzschreibweisen
position
CSS positioniertes Layout Modul