top CSS property

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 -Blöckeinschlusses an, oder im Falle von Anker-positionierten Elementen, wenn die anchor()-Funktion innerhalb des Werts 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 Sticky-Bereichsrechteck 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 spezifiziert 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 berücksichtigt. Dies bedeutet, dass sich ein Sticky-Element potenziell nach oben und unten innerhalb seines enthaltenden Blocks bewegen kann, basierend auf den Werten dieser beiden Eigenschaften, solange die Positionsbox des Elements innerhalb seines enthaltenden 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, null oder positiver <length>:

• für absolut positionierte Elemente stellt es den Abstand zur oberen Begrenzung des enthaltenden Blocks dar.
• für Anker-positionierte Elemente wird die anchor()-Funktion zu einem <length>-Wert relativ zur Position der oberen oder unteren Kante des zugehörigen Ankerelements aufgelöst (siehe Verwendung von Inset-Eigenschaften mit anchor()-Funktionswerten), und die anchor-size()-Funktion wird zu einem <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements aufgelöst (siehe Festlegen 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 enthaltenden 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 eine 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 ein statisches Element wäre.
• für relativ positionierte Elemente der Abstand des Elements von seiner normalen Position basierend auf der bottom-Eigenschaft festgelegt wird; oder wenn bottom ebenfalls auto ist, wird das Element überhaupt nicht vertikal verschoben.

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 10% vom oberen Rand

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 positionierte Layouts Modul