top

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 die Entfernung zwischen dem äußeren Rand der oberen Kante des Elements und dem inneren Rand der oberen Kante seines enthaltenden Blocks an oder – im Fall von ankerpositionierten Elementen bei Verwendung der Funktion anchor() im Wert – 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 von ihrer normalen Position verschoben wird.
• Wenn position auf sticky gesetzt ist, wird die top Eigenschaft zur Berechnung des sticky-constraints Rechtecks verwendet.
• Wenn position auf static gesetzt ist, hat die top Eigenschaft keine Wirkung.

Wenn sowohl top als auch die Werte von bottom 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 berücksichtigt.
• Wenn position auf relative gesetzt ist oder die height eingeschränkt ist, hat die top Eigenschaft Vorrang und die bottom Eigenschaft wird ignoriert.
• Wenn position auf sticky gesetzt ist, werden sowohl die top als auch die bottom Werte berücksichtigt. Dies bedeutet, dass sich ein sticky Element potentiell basierend auf den Werten dieser beiden Eigenschaften innerhalb seines enthaltenden Blocks auf und ab bewegen kann, solange die Positionsbox des Elements innerhalb seines enthaltenden Blocks bleibt.

<length>

Ein negativer, null oder positiver <length>:

• für absolut positionierte Elemente bedeutet dies die Distanz zur oberen Kante des enthaltenden Blocks.
• für ankerpositionierte Elemente löst die Funktion anchor() sich zu einem <length> Wert relativ zur Position der oberen oder unteren Kante des verbundenen Ankerelements auf (siehe Verwendung von inset-Eigenschaften mit anchor() Funktionswerten), und die Funktion anchor-size() löst sich zu einem <length> Wert relativ zur Breite oder Höhe des verbundenen Ankerelements auf (siehe Festlegung der Elementposition basierend auf der Ankergröße).
• für relativ positionierte Elemente bedeutet es die Distanz, um die das Element von seiner normalen Position verschoben wird.

<percentage>

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

auto

Bestimmt, 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 dort positioniert, wo es vertikal positioniert wäre, wenn es ein statisches Element wäre.
• für relativ positionierte Elemente die Entfernung des Elements von seiner normalen Position basierend auf der bottom Eigenschaft erfolgt; oder wenn bottom ebenfalls auto ist, wird das Element überhaupt nicht vertikal verschoben.

inherit

Bestimmt, dass der Wert derselbe ist wie der berechnete Wert von seinem Elternelement (das möglicherweise nicht sein enthaltender Block ist). Dieser berechnete Wert wird dann behandelt, als wäre er ein <length>, <percentage>, oder das auto Schlüsselwort.

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  

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