bottom

Probieren Sie es aus

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 Außenrand des unteren Randes des Elements und dem Außenrand der unteren Polsterung des umgebenden Blocks an. Bei verankerten positionierten Elementen, wenn die anchor()-Funktion innerhalb des Werts verwendet wird, ist sie 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 Unterkante des Elements über ihre normale Position verschoben wird.
• Wenn position auf sticky gesetzt ist, wird die bottom-Eigenschaft verwendet, um das klebrige Beschrä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 spezifiziert 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.

Syntax

/* <length> values */
bottom: 3px;
bottom: 2.4em;
bottom: calc(anchor(--my-anchor 50%) + 5px);
bottom: anchor-size(width);

/* <percentage>s of the height of the containing block */
bottom: 10%;

/* Keyword value */
bottom: auto;

/* Global values */
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;

Werte

<length>

Ein negativer, null oder positiver <length>:

• für absolut positionierte Elemente stellt es den Abstand zur Unterkante des umgebenden Blocks dar.
• für relativ positionierte Elemente stellt es die Entfernung dar, um die das Element über seine normale Position hinaus bewegt wird.
• für verankert positionierte Elemente wird die anchor()-Funktion zu einem <length>-Wert relativ zur Position der oberen oder unteren Kante des zugehörigen Ankerelements aufgelöst (siehe Verwendung von inset-Eigenschaften mit anchor()-Funktionswerten), und die anchor-size()-Funktion wird zu einem <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements aufgelöst (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 eine höhenbasierte Größe auf dem Inhalt behandelt wird; oder wenn top auch auto ist, wird das Element dort positioniert, wo es vertikal positioniert werden sollte, wenn es sich um ein statisches Element handeln würde.
• für relativ positionierte Elemente die Entfernung des Elements von seiner normalen Position auf der top-Eigenschaft basiert; oder wenn top auch auto ist, wird das Element überhaupt nicht vertikal verschoben.

Formale Definition

Formale Syntax

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  

Beispiele

Absolute und feste Positionierung

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 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