top

Probieren Sie es aus

top: 0;

top: 4em;

top: 10%;

top: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Die Wirkung von top hängt davon ab, wie das Element positioniert ist (d.h. der 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 umschließenden Blocks an oder, 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 den Abstand an, den die obere Kante des Elements unterhalb seiner normalen Position verschoben wird.
• Wenn position auf sticky gesetzt ist, wird die top-Eigenschaft verwendet, um das sticky-Begrenzungsrechteck zu berechnen.
• Wenn position auf static gesetzt ist, hat die top-Eigenschaft keinen Effekt.

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 nicht spezifiziert ist (entweder auto oder 100%), werden sowohl die top- als auch die bottom-Werte respektiert.
• 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 aufwärts und abwärts innerhalb seines umschließenden Blocks bewegen kann, basierend auf den Werten dieser beiden Eigenschaften, solange sich das Positionsfeld des Elements innerhalb seines umschließenden Blocks befindet.

Syntax

/* <length> values */
top: 3px;
top: 2.4em;
top: anchor(bottom);
top: anchor-size(--my-anchor 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>

Eine negative, null oder positive <length>:

• für absolut positionierte Elemente stellt es den Abstand zur oberen Kante des umschließenden Blocks dar.
• 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 (siehe Verwendung von Inset-Eigenschaften mit anchor()-Funktionswerten), und die anchor-size()-Funktion löst sich zu einem <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Festlegung der Elementposition basierend auf der 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 umschließenden Blocks.

auto

Gibt an, dass:

• für absolut positionierte Elemente die Position des Elements basierend auf der bottom-Eigenschaft festgelegt wird, während height: auto als Höhe basierend auf dem Inhalt behandelt wird; oder wenn bottom ebenfalls auto ist, wird das Element dort positioniert, wo es vertikal positioniert werden sollte, wenn es sich um ein statisches Element handelt.
• 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 bewegt.

Formale Definition

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

body {
  background: beige;
}

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• bottom, left, und right
• inset Kurznotation
• inset-block-start, inset-block-end, inset-inline-start, und inset-inline-end
• inset-block und inset-inline Kurznotationen
• position
• CSS positioniertes Layout Modul