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. 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 dem inneren Rand der oberen Kante seines umschließenden Blocks an, oder im Falle 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 ihrer normalen Position verschoben wird.
• Wenn position auf sticky gesetzt ist, wird die top-Eigenschaft verwendet, um das Sticky-Constraint-Rechteck 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 nicht festgelegt 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 top- als auch bottom-Werte berücksichtigt. Dies bedeutet, dass ein Sticky-Element sich potenziell innerhalb seines umgebenden Blocks basierend auf den Werten dieser beiden Eigenschaften nach oben und unten bewegen kann, solange das Positionsfeld des Elements innerhalb seines umgebenden Blocks bleibt.

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>

Ein negativer, nuller oder positiver <length>:

• für absolut positionierte Elemente stellt er den Abstand zur oberen Kante des umgebenden Blocks dar.
• für anker-positionierte Elemente löst die anchor()-Funktion einen <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 einen <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Einstellung der Elementposition basierend auf Ankergröße).
• für relativ positionierte Elemente stellt er den Abstand dar, um den das Element unterhalb seiner normalen Position verschoben wird.

<percentage>

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

auto

Gibt an, dass:

• für absolut positionierte Elemente die Position des Elements basierend auf der bottom-Eigenschaft bestimmt wird, während height: auto als eine auf den Inhalt basierende Höhe behandelt wird; oder wenn bottom ebenfalls auto ist, wird das Element dort positioniert, wo es sich vertikal befinden sollte, wenn es ein statisches Element wäre.
• für relativ positionierte Elemente der Abstand des Elements von seiner normalen Position basierend auf der bottom-Eigenschaft bestimmt wird; oder wenn bottom ebenfalls auto ist, das Element überhaupt nicht vertikal verschoben wird.

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