bottom

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, spezifiziert die bottom Eigenschaft den Abstand zwischen dem äußeren Rand des unteren Marginalbereichs des Elements und dem äußeren Rand der unteren Polsterung des enthaltenden Blocks oder, im Fall von Positionierung mit Ankerpunkt 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, spezifiziert die bottom Eigenschaft die Distanz, die sich die Unterkante des Elements über seine normale Position bewegt.
• Wenn position auf sticky gesetzt ist, wird die bottom Eigenschaft verwendet, um das Sticky-Constraint-Rechteck 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>:

• 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, um den das Element über seine normale Position hinaus verschoben wird.
• für mit Ankerpunkt positionierte Elemente, löst die anchor() Funktion sich in einen <length> Wert auf, relativ zur Position der oberen oder unteren Kante des zugehörigen Ankerelements (siehe Verwendung von Inset-Eigenschaften mit anchor() Funktionswerten), und die anchor-size() Funktion löst sich in einen <length> Wert auf, relativ zur Breite oder Höhe des zugehörigen Ankerelements (siehe Festlegen der Elementposition basierend auf der Ankergröße).

<percentage>

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

auto

Spezifiziert, dass:

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

inherit

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

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 im Gegensatz 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 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