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. dem Wert der position Eigenschaft):

• Wenn position auf absolute oder fixed gesetzt ist, gibt die bottom-Eigenschaft den Abstand zwischen der Außenkante der unteren Randbegrenzung des Elements und der Außenkante der unteren Polsterung des enthaltenden Blocks an. Oder im Fall von Anker-positionierten Elementen, wenn die anchor() Funktion im Wert 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 welchen die Unterkante des Elements über ihre normale Position bewegt wird.
• Wenn position auf sticky gesetzt ist, wird die bottom-Eigenschaft verwendet, um das klebende Einschränkungsrechteck zu berechnen.
• 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 berücksichtigt. 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>

Eine negative, null oder positive <length>:

• bei absolut positionierten Elementen repräsentiert sie den Abstand zur Unterkante des umgebenden Blocks.
• bei relativ positionierten Elementen repräsentiert sie den Abstand, um den das Element über seine normale Position verschoben wird.
• bei Anker-positionierten Elementen löst die anchor() Funktion zu einem <length> Wert auf, relativ zur Position der Ober- oder Unterkante des zugeordneten Ankerelements (siehe Verwendung von Einbettungseigenschaften mit anchor() Funktionswerten), und die anchor-size() Funktion löst zu einem <length> Wert auf, relativ zur Breite oder Höhe des zugeordneten Ankerelements (siehe Festlegung der Elementposition basierend auf der Ankergröße).

<percentage>

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

auto

Gibt an, dass:

• bei absolut positionierten Elementen die Position des Elements auf der top Eigenschaft basiert, während height: auto als eine auf dem Inhalt basierende Höhe behandelt wird; oder wenn top auch auto ist, wird das Element an der Position platziert, an der es vertikal positioniert wäre, wenn es ein statisches Element wäre.
• bei relativ positionierten Elementen basiert der Abstand des Elements von seiner normalen Position auf der top Eigenschaft; oder wenn top auch auto ist, wird das Element überhaupt nicht vertikal verschoben.

inherit

Gibt an, dass der Wert derselbe ist wie der berechnete Wert des übergeordneten Elements (das möglicherweise nicht sein umgebender Block ist). Dieser berechnete Wert wird dann behandelt, als ob er ein <length>, <percentage> oder das Schlüsselwort auto wäre.

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 zeigt den Unterschied im Verhalten der bottom-Eigenschaft, wenn position absolute versus 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 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