bottom

Probieren Sie es aus

bottom: 0;

bottom: 4em;

bottom: 10%;

bottom: 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;
}

Syntax

/* <length> values */
bottom: 3px;
bottom: 2.4em;
bottom: calc(anchor(--my-anchor 50%) + 5px);
bottom: anchor-size(width);

/* <percentage>s of the height of the containing block */
bottom: 10%;

/* Keyword value */
bottom: auto;

/* Global values */
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;

Werte

<length>

Ein negativer, null oder positiver <length>:

• für absolut positionierte Elemente stellt er die Distanz zur unteren Kante des umgebenden Blocks dar.
• für relativ positionierte Elemente stellt er die Distanz dar, um die das Element über seine normale Position hinaus verschoben wird.
• für anker-positionierte Elemente löst sich die anchor()-Funktion in einen <length>-Wert relativ zur Position der oberen oder unteren Kante des zugehörigen Ankerelements auf (siehe Verwenden von Inset-Eigenschaften mit anchor()-Funktionswerten), und die anchor-size()-Funktion löst sich in einen <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Festlegen der Elementposition basierend auf Ankergröße).

<percentage>

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

auto

Gibt an, dass:

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

Beschreibung

Die Wirkung von bottom 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 bottom-Eigenschaft die Distanz zwischen der äußeren Kante des unteren Randes des Elements und der äußeren Kante des unteren Innenabstandes des umgebenden Blocks an, oder im Fall von anker-positionierten Elementen wenn die anchor()-Funktion innerhalb des Wertes verwendet wird, relativ zur Position der angegebenen <anchor-side>-Kante. Die bottom-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 bottom-Eigenschaft die Distanz an, um die die untere Kante des Elements über seine normale Position hinaus verschoben wird.
• Wenn position auf sticky gesetzt ist, wird die bottom-Eigenschaft verwendet, um das klebrige Beschränkungsrechteck zu berechnen.
• Wenn position auf static gesetzt ist, hat die bottom-Eigenschaft keine Wirkung.

Wenn sowohl top als auch bottom angegeben sind und position auf absolute oder fixed gesetzt ist und height nicht festgelegt ist (entweder auto oder 100%), werden sowohl die top- als auch die bottom-Abstände respektiert. In allen anderen Situationen, wenn height in irgendeiner Weise eingeschränkt ist oder position auf relative gesetzt ist, hat die top-Eigenschaft Vorrang und die bottom-Eigenschaft wird ignoriert.

Formale Definition

Formale Syntax

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

Absolute und fixe Positionierung

Dieses Beispiel zeigt den Unterschied im Verhalten der bottom-Eigenschaft, wenn position absolute gegenüber fixed ist.

HTML

<p>
  This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>

CSS

p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgb(55 55 55 / 20%);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• top, 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