CSS/Eigenschaften/Positionierung/bottom

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Angabe bottom (Startposition von unten) bestimmt, wo die untere Begrenzung eines positionierten Elementes verläuft.

  • CSS 1.0
  • CSS 2.1
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>bottom</title>
    <style>
      div {
        position: absolute;
        top: 100px;
        left: 350px;
        width: 350px;
        height: 380px;
        background-color: #F1F3F4;
      }
      img {
        position: absolute;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <h1>untenbündige Hunde</h1>
    <img src="http://wiki.selfhtml.org/images/3/31/Hund.gif" width="208" height="181" alt="Hund">
    <div>
      <img src="http://wiki.selfhtml.org/images/3/31/Hund.gif" width="208" height="181" alt="Hund">
    </div>
  </body>
</html>
Hier fehlt im Gegensatz zu den Beispielen für top oder right die Angabe body {position: relative;}. Deshalb wird das eine Bild nun am Viewport ausgerichtet.

Mit bottom können Sie die Startposition von unten bestimmen. Erlaubt sind dabei folgende Angaben:

Beachten Sie: Die Angabe bottom gilt nur für Elemente, deren position-Wert relative, absolute oder fixed ist.
Die Angabe ist der Abstand des unteren Randes des Elements zum unteren Rand seines Bezugselementes, ggf. zuzüglich eines margin-bottom des Elements. Ein unterer Innenabstand des Bezugselements wird hingegen nur berücksichtigt, wenn für bottom kein konkreter Abstand angegeben wurde (also bottom: auto;).

Weblinks[Bearbeiten]