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 der äußeren Kante des unteren Rands des Elements und der äußeren Kante des unteren Abstandsblocks des enthaltenden Blocks an, oder im Falle 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 über ihre normale Position bewegt 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 spezifiziert ist (entweder auto oder 100%), werden sowohl die Abstände von top als auch von bottom 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, null oder positiver <length>:

• für absolut positionierte Elemente repräsentiert es den Abstand zur unteren Kante des enthaltenden Blocks.
• für relativ positionierte Elemente repräsentiert es den Abstand, den das Element über seine normale Position bewegt wird.
• für Anker-positionierte Elemente löst sich die anchor() Funktion zu einem <length> Wert relativ zur Position der oberen oder unteren Kante des zugeordneten Ankerelements auf (siehe Verwendung von Inset-Eigenschaften mit anchor() Funktionswerten), und die anchor-size() Funktion löst sich zu einem <length> Wert relativ zur Breite oder Höhe des zugeordneten Ankerelements auf (siehe Festlegung der Elementposition basierend auf der Ankergröße).

<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 top Eigenschaft ist, während height: auto als eine Höhe basierend auf dem Inhalt behandelt wird; oder wenn top auch 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 basierend auf der top Eigenschaft ist; oder wenn top auch auto ist, wird das Element vertikal gar nicht bewegt.

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 absolute im Vergleich zu 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

• top, left, und right
• inset Kurzschreibweise
• inset-block-start, inset-block-end, inset-inline-start, und inset-inline-end
• inset-block und inset-inline Kurzschreibweisen
• position
• CSS positioniertes Layout Modul