4.1 absolute positioning
Absolutes Positionieren (absolute positioning) in CSS ermöglicht es, Elemente auf einer Webseite präzise zu platzieren. Bei der Verwendung von absolutem Positionieren wird das Element aus dem normalen Dokumentenfluss entfernt und relativ zum nächsten positionierten Vorfahren platziert. Wenn es keinen solchen Vorfahren gibt, wird das Element relativ zum initialen Container positioniert (normalerweise ist das <html> oder <body>).
Hauptmerkmale des absoluten Positionierens:
- Entfernung aus dem Dokumentenfluss: Absolut positionierte Elemente beeinflussen keine anderen Elemente und werden bei der Berechnung der Größe von Elternelementen nicht berücksichtigt.
- Relative Positionierung: Elemente werden relativ zum nächsten Vorfahren mit relativer (
position: relative), absoluter (position: absolute), fester (position: fixed) oder sticky (position: sticky) Positionierung platziert. - Verwendung von Koordinaten: Die Eigenschaften
top,right,bottomundleftwerden verwendet, um die genaue Position des Elements festzulegen.
Beispiel für grundlegendes absolutes Positionieren
Lass uns ein einfaches Beispiel mit absolutem Positionieren eines Elements betrachten:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
<div class="container">
<div class="box">Absolute Box</div>
</div>
In diesem Beispiel wird das Element .box relativ zum Elternelement .container, welches position: relative; hat, positioniert.
4.2 Erstellen von Overlays
Absolutes Positionieren wird oft verwendet, um Overlays zu erstellen, wie z. B. modale Fenster, Tooltips und Lightboxes.
Beispiel für absolutes Positionieren:
.wrapper {
min-height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
<div class="wrapper">
<div class="overlay">
<div class="modal">
<p>Inhalt des Modals</p>
</div>
</div>
</div>
4.3 Präzise Layouts und Interface-Komponenten
Absolutes Positionieren ist nützlich, um präzise Layouts zu erstellen, wie z. B. Steuerungselemente in Mediaplayern, benutzerdefinierte Steuerungselemente und Werkzeugleisten.
Beispiel für absolutes Positionieren:
.player {
position: relative;
width: 400px;
height: 50px;
background-color: #333;
color: white;
}
.play-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.volume-control {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
<div class="player">
<div class="play-button">Play</div>
<div class="volume-control">Volume</div>
</div>
4.4 Erstellen von komplexen Layouts
Absolutes Positionieren ermöglicht die Erstellung von komplexen Layouts, wie z. B. Informations panels und interaktive Elemente.
Beispiel für absolutes Positionieren:
.dashboard {
position: relative;
width: 800px;
height: 600px;
background-color: #f0f0f0;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: white;
}
.main-content {
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
<div class="dashboard">
<div class="sidebar">Sidebar</div>
<div class="main-content">Hauptinhalt</div>
</div>
GO TO FULL VERSION