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 Einsetzeigenschaft hat keine Auswirkung 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 der inneren Grenze der oberen Kante seines enthaltenden Blocks an, oder, im Fall von Anker-positionierten Elementen, wenn die anchor() Funktion innerhalb des Werts verwendet wird, relativ zu der 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 den Abstand an, den die obere Kante des Elements unterhalb seiner normalen Position verschoben ist.
  • Wenn position auf sticky gesetzt ist, wird die top Eigenschaft verwendet, um das Sticky-Beschränkungsrechteck zu berechnen.
  • 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:

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

Syntax

css
/* <length> values */
top: 3px;
top: 2.4em;
top: anchor(bottom);
top: calc(anchor(--myAnchor 50%) + 10px);

/* <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>, der darstellt:

  • für absolut positionierte Elemente, den Abstand zur oberen Kante des enthaltenden Blocks.
  • für Anker-positionierte Elemente löst sich die anchor() Funktion zu einem <length> Wert relativ zur Position der oberen oder unteren Kante des zugehörigen Ankerelements auf.
  • für relativ positionierte Elemente, den Abstand, 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, basiert die Position des Elements auf der bottom Eigenschaft, während height: auto als eine Höhe basierend auf dem Inhalt behandelt wird; oder wenn bottom ebenfalls auto ist, wird das Element dort positioniert, wo es vertikal positioniert sein sollte, wenn es ein statisches Element wäre.
  • für relativ positionierte Elemente, basiert der Abstand des Elements von seiner normalen Position auf der bottom Eigenschaft; oder wenn bottom ebenfalls auto ist, wird das Element überhaupt nicht vertikal verschoben.
inherit

Gibt an, dass der Wert derselbe ist wie der berechnete Wert des Elternelements (was nicht unbedingt der enthaltende Block sein muss). Dieser berechnete Wert wird dann behandelt, als wäre er ein <length>, <percentage>, oder das auto Schlüsselwort.

Formale Definition

Anfangswertauto
Anwendbar aufpositionierte Elemente
VererbtNein
Prozentwertebezieht sich auf die Höhe des äußeren Elements
Berechneter Wertfalls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto
AnimationstypLä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, das 10% von oben gesetzt ist

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