CSS-Eigenschaft bottom

Die CSS-Eigenschaft bottom gibt die untere Position eines Elements in Kombination mit der Eigenschaft position an.

Wenn die Elemente statisch sind, ist das der Standardzustand. In diesem Fall hat die Eigenschaft bottom keine Auswirkung. Aber wenn die Positionierung eines Elements "relative", "absolute", "fixed" oder "sticky" ist, spielt der Wert bottom eine große Rolle. Wenn die Position "fixed" ist, ist das Element relativ zum Ansichtsfenster des Bildschirms und bleibt beim Scrollen fest auf dem Bildschirm. Wenn es "absolute" ist, ist die Position des Elements absolut relativ zu seinem Container. Wenn die Position "relative" ist, bewegt sie die Unterkante des Elements über/unter seine normale Position. Und im Falle der Position "sticky" ist die Elementposition relativ, wenn sich das Element innerhalb des Ansichtsfensters befindet, und wie seine Position fixiert ist, wenn es außerhalb liegt.

Anfangswert	auto
Gilt für	Alle Elemente. Es gilt auch für ::first-letter.
Geerbt	Nein
Animierbar	Ja, die untere Position kann animierbar sein.
Version	CSS2
DOM Syntax	object.style.bottom = "10px";

Syntax

bottom: auto | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
      position: relative;
      height: 300px;
      width: 80%;
      border: 3px solid #8ebf42;
      }
      div.absolute {
      position: absolute;
      width: 50%;
      bottom: 10px;
      border: 3px solid #8ebf42;
      } 
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft bottom</h2>
    <div class="parent">
      Die Position des Elements div ist auf relativ gesetzt.
      <div class="absolute">Diese Unterkante von div wird 10 Pixel über der Unterkante des enthaltenden Elements platziert und die Position auf absolut gesetzt.</div>
    </div>
    </div>
  </body>
</html>

Versuch es selber!

Weiter betrachten wir ein weiteres Beispiel mit allen Positionen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
      position: relative;
      height: 180px;
      border: 3px solid #8AC007;
      }
      div.absolute {
      position: absolute;
      width: 50%;
      bottom: 20px;
      border: 3px solid #8AC007;
      } 
      div.relative {
      position: relative;
      width: 50%;
      bottom: 2px;
      border: 3px solid #8AC007;
      } 
      div.fixed {
      position: fixed;
      width: 50%;
      bottom: 50px;
      border: 3px solid #8AC007;
      } 
      div.sticky {
      position: sticky;
      width: 50%;
      bottom: 10px;
      border: 3px solid #8AC007;
      } 
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft bottom</h2>
    <div class="parent">
      Dieses Element div hat die Position: relative.
      <div class="absolute"><strong>position: absolute and bottom 20px</strong><br>Die Unterkante dieser Div ist 20 Pixel über der Unterkante des enthaltenden Elements platziert.</div>
    </div>
    <br>
    <div class="parent">
      Dieses Element div hat die Position: relative.
      <div class="relative"><strong>position: relative and bottom 2px</strong><br>Die untere Kante dieser div ist 2 Pixel über ihrer normalen Position platziert.</div>
    </div>
    <br>
    <div class="fixed"><strong>position: fixed and bottom 50px</strong><br>This div's bottom edge is placed 50 pixels from the bottom of the viewport.</div>
    <div class="parent">
      This div element has position: relative.
      <div class="sticky"><strong>position: sticky and bottom 10px</strong><br>This div is sticky.</div>
    </div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
auto	Das ist der Standardwert. Es ermöglicht dem Browser, die Position der Unterkante zu berechnen.
percentage	Es definiert die Position des Elements in Prozent der enthaltenen Blockhöhe.
length	Es definiert die Position des Elements in px, cm usw. Negative Werte sind erlaubt.
initial	Es setzt die Eigenschaft auf den Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.