bottom

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

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 den Abstand zwischen dem äußeren Rand des unteren Margin des Elements und dem äußeren Rand des unteren Paddings 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 den Abstand an, um den die untere Kante des Elements von ihrer normalen Position nach oben verschoben wird.
• Wenn position auf sticky gesetzt ist, wird die bottom-Eigenschaft zur Berechnung des Sticky-Bereichs verwendet.
• Wenn position auf static gesetzt ist, hat die bottom-Eigenschaft keine Wirkung.

Wenn sowohl top als auch bottom angegeben sind, position auf absolute oder fixed gesetzt ist und height nicht angegeben 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.

<length>

Ein negativer, nuller oder positiver <length>:

• für absolut positionierte Elemente stellt er den Abstand zur unteren Kante des umgebenden Blocks dar.
• für relativ positionierte Elemente stellt er den Abstand dar, um den das Element von seiner normalen Position nach oben verschoben wird.
• 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 Festlegung der Elementposition basierend auf der 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 auf dem Inhalt basierende Höhe behandelt wird; oder wenn top ebenfalls auto ist, wird das Element dort positioniert, wo es vertikal positioniert sein sollte, wenn es ein statisches Element wäre.
• für relativ positionierte Elemente der Abstand des Elements von seiner normalen Position auf der top-Eigenschaft basiert; oder wenn top ebenfalls auto ist, wird das Element überhaupt nicht vertikal verschoben.

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  

Dieses Beispiel demonstriert den Unterschied im Verhalten der bottom-Eigenschaft, wenn position auf absolute im Gegensatz zu fixed gesetzt 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

• 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