Absolute Positionierung und Containing Block
Positionieren Sie Elemente absolut relativ zu ihrem nächstgelegenen positionierten Vorfahren.
Absolute Positionierung und Containing Block ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
position: absolute
Ein absolut positioniertes Element wird aus dem normalen Dokumentfluss entfernt. Andere Elemente verhalten sich so, als würde es nicht existieren. Es wird relativ zu seinem nächsten positionierten Vorfahren positioniert.
Der Containing Block
Der Containing Block eines absolut positionierten Elements ist sein nächster Vorfahre mit einem position-Wert ungleich static. Wenn kein solcher Vorfahre existiert, wird das Element relativ zum initialen Containing Block (dem Viewport) positioniert.
Einen Containing Block einrichten
Das häufigste Muster: Fügen Sie einem übergeordneten Element position: relative hinzu, um absolut positionierte Kindelemente darin zu halten.
<div class="card">Card content<span class="badge">Badge</span></div>
Offset-Eigenschaften mit absolute
Bei absoluter Positionierung werden top/right/bottom/left von der Padding-Kante des Containing Blocks aus gemessen.
<div class="tooltip-wrap">Hover target<span class="tooltip">I'm below the parent</span></div>
Zentrieren mit absolute
Die klassische Zentrierungstechnik für absolute Elemente:
<div class="center-wrap"><div class="centered">Perfectly centered</div></div>
Breite und Höhe absoluter Elemente
Absolut positionierte Elemente passen sich standardmäßig automatisch an ihren Inhalt an (sofern keine Breite oder Höhe festgelegt ist). Sie dehnen sich nicht mehr wie Blockelemente über die gesamte Breite ihres Containers aus.
Strecken mit allen Kanten
Wenn Sie alle vier Kanten auf 0 setzen, wird ein absolut positioniertes Element so gestreckt, dass es seinen Containing Block ausfüllt:
<div class="stretch-wrap"><div class="overlay">Overlay covers all edges</div></div>
Kurzschreibweise inset
Die Eigenschaft inset ist eine Kurzschreibweise für top, right, bottom und left zusammen:
<div class="cover-wrap"><div class="full-cover"></div></div>
Stapeln mit z-index
Absolut positionierte Elemente nehmen an Stacking Contexts teil. Verwenden Sie z-index, um zu steuern, welches der überlappenden absoluten Elemente oben angezeigt wird.
<div class="stack-wrap"><div class="box-a">Behind</div><div class="tooltip">On top (z-index:100)</div></div>
Häufiger Fehler: Das übergeordnete Element vergessen
Wenn Sie vergessen, dem übergeordneten Element position: relative hinzuzufügen, wird ein absolutes Kindelement relativ zum nächsten bereits positionierten Vorfahren positioniert – häufig zum Viewport. Überprüfen Sie immer den Containing Block.
Absolute innerhalb von Flex/Grid
Ein Flex- oder Grid-Container ist nicht automatisch ein positioniertes Element. Sie müssen weiterhin ausdrücklich position: relative hinzufügen, damit er zum Containing Block für absolute Kindelemente wird.
Kurzer Check
Wo wird ein absolut positioniertes Element platziert, wenn keiner seiner Vorfahren ein anderes position als static hat?
Zusammenfassung
Absolut positionierte Elemente verlassen den Dokumentfluss und werden relativ zu ihrem nächsten Vorfahren positioniert, dessen Wert nicht static ist. Fügen Sie dem übergeordneten Element immer position: relative hinzu, um die Platzierung zu steuern. Verwenden Sie inset: 0, um ein absolutes Element so zu strecken, dass es seinen Container ausfüllt.
Häufig gestellte Fragen
Ist die Lektion „Absolute Positionierung und Containing Block“ kostenlos?
Ja — der vollständige Text von „Absolute Positionierung und Containing Block“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Absolute Positionierung und Containing Block“?
Positionieren Sie Elemente absolut relativ zu ihrem nächstgelegenen positionierten Vorfahren. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Absolute Positionierung und Containing Block“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Statische und relative Positionierung
- Absolute Positionierung und Containing Block
- Fixierte und sticky Positionierung
- Z-Index und Stacking Context