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.

* Some parts of this feature may have varying levels of support.

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

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 des oberen Randes des Elements und der inneren Grenze des oberen Randes seines umgebenden Blocks an, oder im Falle von ankerpositionierten Elementen, wenn die anchor()-Funktion innerhalb des Werts verwendet wird, in Bezug auf den angegebenen <anchor-side>-Rand. 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 der obere Rand des Elements unterhalb seiner normalen Position verschoben wird.
  • Wenn position auf sticky gesetzt ist, wird die top-Eigenschaft zur Berechnung des Haftrechtecks 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:

  • Wenn position auf absolute oder fixed gesetzt ist und height nicht angegeben ist (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 betrachtet. Dies bedeutet, dass ein haftendes Element sich potenziell innerhalb seines umgebenden Blocks auf und ab bewegen kann, basierend auf den Werten dieser beiden Eigenschaften, solange die Position des Elements in seinem umgebenden Block enthalten 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>:

<percentage>

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

auto

Gibt an, dass:

  • für absolut positionierte Elemente die Position des Elements auf der bottom-Eigenschaft basiert, während height: auto als eine auf dem Inhalt basierende Höhe behandelt wird; oder wenn bottom ebenfalls auto ist, wird das Element dort positioniert, wo es vertikal positioniert wäre, 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 überhaupt nicht vertikal verschoben.

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 eingestellt 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

Siehe auch