Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: bottom, Kategorien: Positionierung (allgemein), Visual formatting model (CSS 2.1)

Positionierung von unten

Mit bottom:[Wert] und position: relative|absolute|fixed wird ein HTML-Element von unten aus positioniert.

CSS-Eigenschaft: bottom
KurzbeschreibungWerteStandardwertKategorieHinweis
Positionierung von unten
  • <length>
  • <percentage>
  • auto
  • inherit
auto
Allgemein:
Positionierung
CSS 2.1:
Visual formatting model
 

Verwandte Eigenschaften aus der Kategorie: Positionierung (allgemein), Visual formatting model (CSS 2.1):

Folgendes ist beim Einsatz von bottom zu beachten:

  • Alleine eingesetzt hat die Eigenschaft bottom keine Auswirkung.
  • Sie wirkt erst dann, wenn die Eigenschaft position den Wert relative, absolute oder fixed hat. Die Angabe einer position ist folglich Pflichtangabe im Zusammenhang mit bottom.
  • Die Angabe position: static ist die Standardeinstellung der Browser, auch wenn dieser Wert als position explizit gesetzt ist, greift bottom nicht.
  • bottom ist der Gegenspieler von top, es macht also keinen Sinn, beide Werte zu setzen. Anders als beispielsweise in PHP oder JavaScript, wo Fehler mit einer Fehlermeldung mitgeteilt werden, passiert das nicht beim CSS, falls bottom und top gleichzeitig gesetzt sind. Auch der W3C-Validator erkennt diese Angabe nicht als falsch.
  • Falls bottom und top dem selben Element zugewiesen werden, greift top, selbst wenn die Angabe von bottom hinter top angegeben ist, als auch wenn man per !important die Wertigkeit von bottom erhöht.
  • Gleiches gilt auch für die Kaskade, wenn ein Eltern-Element eine Einstellung von top hat, wird im Kind-Element die Angabe von bottom ignoriert
  • Mögliche Werte sind Angaben in PX, %, EM, etc.
  • Der Standardwert ist auto, was in der Regel 0px von oben bedeutet, wenn top oder bottom nicht gesetzt ist. Darauf sollte man sich jedoch nicht verlassen. Falls eine Angabe für left oder right gemacht wurde, sollte ein top: 0px gesetzt werden, damit man die Position unter Kontrolle hat. Ist das nicht gesetzt, kann das HTML-Element - je nach Browser - schon mal wo anders erscheinen (oder auch gar nicht).
  • In den Beispielen wird nebenbei der Unterschied von position: absolute und position: relative deutlich. In den Beispielen mit absoluter Positionierung fällt das blaue Element aus dem Elementfluss raus, die anderen Elementen "rücken" auf. Bei der relativen Positionierung "reserviert" die blaue Box trotzdem ihren Platz, die anderen Elemente bleiben da, wo wie auch wären, wenn die blaue Box nicht positioniert wäre.
Browserunterstützung von bottom
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu bottom:



Beispiele

HTML:

<div>
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
</div>

CSS:

div {
   height: 290px;
   border: 1px solid black;
   position: relative;
}
/* Damit die Positionierung greifen kann, muss das Eltern-Element selber positioniert sein. Wäre das nicht angegeben, wäre der BODY das Bezugselement. */
div div {
   width: 75px;
   height: 75px;
   float: left;
   margin: 5px;
   border: 5px solid #c0c0c0;
}
/* Ausgangsbasis für das Beispiel - hiermit wird der Rahmen und die Ausmaße der bunten Boxen definiert. */
div div.doRed {
   background-color: red;
}
div div.doBlue {
   background-color: blue;
}
div div.doYellow {
   background-color: yellow;
}
div div.doGreen {
   background-color: green;
}

Beispiel Nr. 1 So sieht's aus:

 

HTML:

<div class="doAbs">
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
</div>

CSS:

div.doAbs div.doBlue {
   position: absolute;
   bottom: 50px;
}
/* Per absoluter Positionierung wird die blaue Box von unten aus des umgebenden DIVs positioniert. Auch wenn nur eine blaue Box zu sehen ist, sind es eigentlich zwei, die sich exakt überlagern, da beide gleich positioniert sind. */

Beispiel Nr. 2 So sieht's aus:

 

HTML:

<div class="doRel">
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
</div>

CSS:

div.doRel div.doBlue {
   position: relative;
   bottom: 50px;
}
/* Bei der relativen Positionierung werden die blauen Boxen 50px unten aus nach oben geschoben, OHNE dass es Einfluss auf den Elementfluss hat. */

Beispiel Nr. 3 So sieht's aus:

 

HTML:

<div class="doRel doPerc">
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
</div>

CSS:

div.doPerc div.doBlue {
   bottom: -20%;
}
/* Prozentuale Angaben sind ebenfalls möglich. Der negative Wert "zieht" die blaue Box nach unten. Ausgangpunkt ist auch hier die linke obere Ecke des Elements selber. Die relative Positionierung ist im Beispiel Nr. 1 gesetzt und greift auch hier. */

Beispiel Nr. 4 So sieht's aus:

 

HTML:

<div class="doAbs doPerc">
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
   <div class="doBlue"></div>
   <div class="doYellow"></div>
   <div class="doGreen"></div>
   <div class="doRed"></div>
</div>

CSS:

div.doAbs.doPerc div.doBlue {
   bottom: 50%;
}
/* Hier eine Prozentangabe in Kombination mit einer absoluten Positionierung. Auch hier überlagern sich die beiden blauen Boxen wieder. */

Beispiel Nr. 5 So sieht's aus:

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 6.517 sec.

Browser-Marktanteile