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>

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>

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.

Browser-Support

1.0+ 12.0+ 1.0+ 1.0+ 6.0+


Finden Sie das nützlich?

Ähnliche Artikel