CSS bottom-Eigenschaft
Die CSS-Eigenschaft bottom legt die untere Position eines Elements in Kombination mit der position-Eigenschaft fest. Mit Beispielen zum Ausprobieren.
Die CSS-Eigenschaft bottom legt die vertikale Position eines positionierten Elements relativ zu seinem umgebenden Block fest. Sie wirkt nur, wenn das Element einen anderen position-Wert als static hat. Ein positiver Wert verschiebt den unteren Rand des Elements nach oben, weg vom unteren Rand seines Referenzrahmens.
Hinweis: Die Eigenschaft bottom hat keine Wirkung auf Elemente mit position: static (dem Standardwert). Es passiert also nichts, bis Sie zusätzlich position setzen.
Wie position die Wirkung beeinflusst
Der Referenzrahmen, von dem aus bottom misst, hängt vollständig vom position-Wert des Elements ab:
relative—bottomversetzt das Element von seiner normalen Position aus.bottom: 20pxverschiebt es 20 px nach oben, ohne das Layout der umgebenden Elemente zu beeinflussen.absolute— das Element wird relativ zu seinem nächsten positionierten Vorfahren positioniert (einem Vorfahren, dessenpositionnichtstaticist).bottom: 0heftet es an den unteren Rand dieses Vorfahren.fixed— das Element wird relativ zum viewport positioniert und bleibt beim Scrollen der Seite an Ort und Stelle.sticky— das Element verhält sich wierelative, bis sein Scroll-Container einen Schwellenwert erreicht, danach verhält es sich wiefixed.
bottom vs. top
Wenn sowohl top als auch bottom für dasselbe Element gesetzt sind, gewinnt top, wenn das Element eine feste Höhe hat (bei position: absolute/fixed), da top zuerst aufgelöst wird. Ist die Höhe auto, dehnt das gleichzeitige Setzen von top und bottom das Element so aus, dass es den Raum zwischen beiden Versätzen ausfüllt — eine praktische Methode, um eine absolut positionierte Box so hoch wie ihren Container zu machen, ohne eine Höhe anzugeben.
Prozentwerte
Ein prozentualer bottom-Wert wird anhand der Höhe des umgebenden Blocks berechnet, nicht des Elements selbst. Hat der umgebende Block keine explizite Höhe, können prozentuale Versätze zu 0 aufgelöst oder ignoriert werden. Bevorzugen Sie daher Längeneinheiten (px, em, rem), wenn die Elternhöhe unbekannt ist.
| Anfangswert | auto |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die untere Position kann animiert werden. |
| Version | CSS2 |
| DOM-Syntax | object.style.bottom = "10px"; |
Syntax
Syntax der CSS-Eigenschaft bottom
bottom: auto | length | percentage | initial | inherit;Beispiel der bottom-Eigenschaft:
Beispiel der CSS-Eigenschaft bottom mit dem Wert position absolute
<!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>Bottom property example</h2>
<div class="parent">
The position of this div is set to relative.
<div class="absolute">This div's bottom edge is placed 10 pixels above the bottom edge of the containing element, and the position is set to absolute.</div>
</div>
</body>
</html>Ergebnis
Beispiel der bottom-Eigenschaft mit allen Positionierungen:
Beispiel der CSS-Eigenschaft bottom mit allen Positionen
<!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;
top: 0;
width: 50%;
bottom: 10px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
This div element has position: relative.
<div class="absolute"><strong>position: absolute and bottom 20px</strong>
<br />This div's bottom edge is placed 20 pixels above the bottom edge of the containing element.</div>
</div>
<br />
<div class="parent">
This div element has position: relative.
<div class="relative"><strong>position: relative and bottom 2px</strong>
<br />This div's bottom edge is placed 2 pixels above its normal position.</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 | Ausprobieren |
|---|---|---|
| auto | Dies ist der Standardwert. Er lässt den Browser die Position des unteren Rands berechnen. | Ausprobieren » |
| percentage | Definiert die Position des Elements in Prozent der Höhe des umgebenden Blocks. | |
| length | Definiert die Position des Elements in px, cm usw. Negative Werte sind erlaubt. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
Der bottom-Versatz ist eine von vier Boxversatz-Eigenschaften, die zusammen mit position verwendet werden:
- top — legt den vertikalen Versatz vom oberen Rand des Referenzrahmens fest.
- left — legt den horizontalen Versatz vom linken Rand fest.
- right — legt den horizontalen Versatz vom rechten Rand fest.
Ein häufiges Muster ist das Anheften eines Elements an eine Ecke, zum Beispiel position: absolute; bottom: 0; right: 0;, um ein Badge an der unteren rechten Ecke seines Containers zu verankern.