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 Einpassungseigenschaft hat keinen Effekt 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;
}

Der Effekt 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 Begrenzung der oberen Kante seines enthaltenden 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, um 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 klebrige Beschränkungsrechteck 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 unterschiedliche 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 berücksichtigt.
  • 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 klebriges Element potentiell innerhalb seines enthaltenden Blocks basierend auf diesen beiden Eigenschaftswerten nach oben und unten bewegen kann, solange das Positionsrechteck des Elements innerhalb des 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, nuller oder positiver <length>:

<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 erfolgt, während height: auto als auf dem Inhalt basierende Höhe behandelt wird; oder wenn bottom ebenfalls auto ist, wird das Element positioniert, wo es vertikal positioniert werden 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.

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

Siehe auch