CSS - Bottom-Eigenschaft: Beherrschung der Elementpositionierung

Hallo da draußen, zukünftige CSS-Zauberer! Heute tauchen wir ein in die faszinierende Welt der CSS bottom Eigenschaft. Als dein freundlicher Nachbarschaftsinformatiklehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Also hol dir dein lieblingsGetränk, mach dich bequem und lassen wir gemeinsam dieses aufregende Abenteuer starten!

Was ist die CSS bottom Eigenschaft?

Bevor wir ins Detail gehen, lassen wir uns mit den Grundlagen beschäftigen. Die CSS bottom Eigenschaft ist wie eine magische Zauberstab, der es dir ermöglicht, Elemente von der Unterseite ihres umgebenden Elements zu positionieren. Sie ist Teil des CSS-Positionierungswerkzeugs, das zusammen mit Eigenschaften wie top, left und right funktioniert.

Stelle es dir vor, wie du deinen HTML-Elementen ein Satz Koordinaten gibst, die ihnen genau sagen, wo sie auf deiner Webseite sitzen sollen. Es ist wie ein Spiel von digitalem Tetris, aber anstelle von fallenden Blöcken platzierst du Web-Elemente!

Mögliche Werte

Nun schauen wir uns die verschiedenen Werte an, die unsere bottom Eigenschaft annehmen kann. Es ist, als ob man aus einem Menü von Positionierungsoptionen wählen würde:

Wert	Beschreibung
auto	Der Browser berechnet die untere Position
Länge	Gibt die untere Position in px, pt, cm, etc. an
%	Gibt die untere Position in % des umgebenden Elements an
inherit	Nimmt den Wert vom übergeordneten Element
initial	Setzt diese Eigenschaft auf ihren Standardwert

Sehen wir uns diese in Aktion mit einigen Codebeispielen an:

/* Verwenden von Pixelwerten */
.box1 {
bottom: 20px;
}

/* Verwenden von Prozentsätzen */
.box2 {
bottom: 10%;
}

/* Verwenden von 'auto' */
.box3 {
bottom: auto;
}

In den obigen Beispielen wird box1 20 Pixel von unten positioniert, box2 wird 10% von unten des Containers positioniert und box3 lässt den Browser die untere Position entscheiden.

Gültigkeit

Die bottom Eigenschaft ist keine Lösung, die für alle Fälle passt. Sie funktioniert nur bei Elementen mit einem angegebenen Positionswert. Schauen wir uns die Positionstypen an, auf die sie angewendet wird:

1. Absolute
2. Relativ
3. Fest
4. Klebrig

Wir werden jeden dieser Typen detaliiert untersuchen. Aber denken Sie daran, bottom beeinflusst nicht statisch positionierte Elemente (die Standardpositionierung).

DOM-Syntax

Für diejenigen von euch, die gerne mit JavaScript herum experimentieren, hier ist, wie ihr die bottom Eigenschaft mit dem Document Object Model (DOM) manipulieren könnt:

object.style.bottom = "20px"

Diese Codezeile würde die bottom Eigenschaft eines Elements auf 20 Pixel setzen. Es ist, als ob man seinem Element eine kleine Nach unten stoßen gibt!

CSS bottom - Mit Absoluter Position

Nun tauchen wir in die verschiedenen Positionierungstypen ein,beginnend mit der absoluten Positionierung. Wenn ein Element absolut positioniert ist, wird es aus dem normalen Dokumentfluss genommen und relativ zu seinem nächsten positionierten Vorfahren positioniert.

.parent {
position: relative;
height: 200px;
background-color: #f0f0f0;
}

.child {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #ff9900;
padding: 10px;
}

<div class="parent">
<div class="child">Ich bin absolut positioniert!</div>
</div>

In diesem Beispiel wird das Kind-Element 20 Pixel von unten und 20 Pixel von rechts seines Elternbehälters positioniert. Es ist, als ob man seinem Element einen bestimmten Platz im Theater seiner Webseite gibt!

CSS bottom - Mit Relativer Position

Relative Positionierung ist ein bisschen anders. Das Element wird relativ zu seiner normalen Position positioniert und andere Elemente stellen sich darum herum ein.

.box {
position: relative;
bottom: 30px;
background-color: #00ff00;
padding: 10px;
}

<div class="box">Ich bin relativ positioniert!</div>

Diese grüne Box wird um 30 Pixel von ihrer normalen Position nach oben verschoben. Es ist, als ob man seinem Element sagt: "Rücke ein bisschen nach oben, aber behalte deinen Platz in der Reihe!"

CSS bottom - Mit Fester Position

Feste Positionierung ist wie die Vergabe eines dauerhaften VIP-Passes. Das Element bleibt an der gleichen Stelle, auch wenn die Seite gescrollt wird.

.header {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
color: white;
padding: 10px;
}

<div class="header">Ich bin eine feste Fußzeile!</div>

Dies erstellt eine Fußzeile, die an der Unterseite des Viewports klebt und immer sichtbar ist, egal wie weit man scrollt. Es ist perfekt für wichtige Informationen oder Navigation, die du immer zugänglich halten möchtest.

CSS bottom - Mit Klebriger Position

Die klebrige Positionierung ist der neue Junge im Block. Es ist eine Mischung aus relativer und fester Positionierung. Das Element wird als relativ positioniert behandelt, bis es einen bestimmten Schwellenwert überschreitet, dann wird es fest.

.sticky-note {
position: sticky;
bottom: 20px;
background-color: #ffff00;
padding: 10px;
}

<div class="sticky-note">Ich bin eine klebrige Notiz!</div>

Diese gelbe Notiz wird mit der Seite scrollen, bis sie 20 Pixel von der Unterseite des Viewports entfernt ist, dann bleibt sie dort kleben. Es ist wie ein digitaler Post-it für deine Webseite!

CSS bottom - Mit Statischer Position

Zuletzt, aber nicht weniger wichtig, sprechen wir über die statische Positionierung. Dies ist die Standardpositionierung für alle Elemente, aber hier ist der Haken - die bottom Eigenschaft hat keine Auswirkung auf statisch positionierte Elemente!

.static-box {
position: static;
bottom: 50px; /* Dies wird keine Auswirkung haben */
background-color: #ff00ff;
padding: 10px;
}

<div class="static-box">Ich bin statisch positioniert!</div>

In diesem Beispiel, auch wenn wir einen bottom Wert gesetzt haben, wird die rosa Box nicht von ihrer normalen Position im Dokumentfluss weichen. Es ist, als ob man versucht, einen Berg zu bewegen - es wird einfach nicht passieren!

Und das war's, Leute! Wir haben die Welt der CSS-Positionierung durchquert und die bottom Eigenschaft in ihrer ganzen Pracht erkundet. Denken Sie daran, das Beherrschen der CSS-Positionierung ist wie das Lernen zu tanzen - es erfordert Übung, aber wenn man den Rhythmus einmal hat, kann man wunderschöne, harmonische Layouts erstellen, die deine Webseiten zum Singen bringen!

Weiter experimentieren, weiter lernen und vor allem: Spaß dabei haben. Schließlich ist Webentwicklung genauso eine Kunst wie eine Wissenschaft. Frohes Coden, zukünftige CSS-Meister!

Credits: Image by storyset