bottom

Die Wirkung von bottom hängt davon ab, wie das Element positioniert ist (d.h. der 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 Rands des Elements und dem äußeren Rand des unteren Innenabstands des umschließenden Blocks an, oder im Fall von ankerpositionierten Elementen bei Verwendung der anchor() Funktion 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 seine normale Position verschoben ist.
• Wenn position auf sticky gesetzt ist, wird die bottom Eigenschaft zur Berechnung des Sticky-Einschränkungs-Rechtecks 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 beachtet. 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>, der repräsentiert:

• für absolut positionierte Elemente, den Abstand zur unteren Kante des umschließenden Blocks.
• für relativ positionierte Elemente, den Abstand, um den das Element über seine normale Position verschoben ist.
• für ankerpositionierte Elemente löst sich die anchor() Funktion zu einem <length>-Wert relativ zur Position der oberen oder unteren Kante des zugehörigen Ankerelements auf.

<percentage>

Ein <percentage> der Höhe des umschließenden 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 auch auto ist, wird das Element an der Stelle positioniert, an der es vertikal sein sollte, wenn es ein statisches Element wäre.
• für anker positionierte Elemente, ein Prozentsatz innerhalb der anchor() Funktion gibt den Abstand als Prozentsatz vom Anfang des Inhalts des Elements entlang der Blockachse an.
• für relativ positionierte Elemente, der Abstand des Elements von seiner normalen Position auf der top Eigenschaft basiert; oder wenn top auch auto ist, wird das Element überhaupt nicht vertikal verschoben.

inherit

Gibt an, dass der Wert derselbe wie der berechnete Wert seines Elternelements ist (das möglicherweise nicht sein umschließender Block ist). Dieser berechnete Wert wird dann so behandelt, als wäre es 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 demonstriert den Unterschied im Verhalten der bottom Eigenschaft, wenn position auf absolute versus 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