8.1 Normaler Fluss
Die Positionierung von Elementen in CSS spielt eine entscheidende Rolle bei der Steuerung ihrer Platzierung und Interaktion auf einer Webseite. Sie bestimmt, wie Elemente im Verhältnis zu anderen Elementen und ihrem Container platziert werden. Lass uns anschauen, wie verschiedene Arten der Positionierung den Fluss der Elemente beeinflussen.
Dokumentenfluss und Positionierung
Elemente im normalen Dokumentenfluss werden nacheinander in der Reihenfolge platziert, die durch das HTML-Markup festgelegt ist. Block-Elemente
(zum Beispiel <div>, <p>, <h1>) werden vertikal platziert,
und nehmen die volle Breite des übergeordneten Containers ein, während Inline-Elemente (zum Beispiel <span>, <a>, <em>)
horizontal platziert werden und nur den benötigten Raum einnehmen.
Beispiel:
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
<div class="block">Block-Element</div>
<span class="inline">Inline-Element</span>
<span class="inline">Inline-Element</span>
8.2 Einfluss der Positionierung auf den Dokumentenfluss
Verschiedene Arten der Positionierung können den Standardfluss des Dokuments ändern. Schauen wir uns an, wie das passiert:
Positionierung static
Die Positionierung static ist der Standardwert und ändert den normalen Dokumentenfluss nicht. Elemente
mit position: static werden in der Reihenfolge platziert, die durch das HTML-Markup festgelegt ist.
Einfluss auf den Fluss:
- Elemente bleiben im normalen Fluss
- Elemente werden nacheinander gemäß ihrer Reihenfolge im HTML platziert
Positionierung relative
Elemente mit position: relative bleiben im normalen Fluss, können jedoch relativ zu ihrer
normalen Position mit den Eigenschaften top, right, bottom, left verschoben werden.
Die Verschiebung beeinflusst nicht die Position anderer Elemente.
Einfluss auf den Fluss:
- Elemente bleiben im normalen Fluss
- Die Verschiebung eines Elements ändert nicht die Platzierung benachbarter Elemente
Positionierung absolute
Elemente mit position: absolute werden aus dem normalen Dokumentenfluss entfernt und relativ zum nächsten
positionierten Vorfahren platziert. Wenn es keinen solchen Vorfahren gibt, werden sie relativ zum anfänglichen
Container platziert (normalerweise <html> oder <body>).
Einfluss auf den Fluss:
- Elemente werden aus dem normalen Fluss entfernt
- Werden relativ zum nächsten positionierten Vorfahren platziert
- Andere Elemente verhalten sich so, als ob diese Elemente nicht existieren
Positionierung fixed
Elemente mit position: fixed werden aus dem normalen Fluss entfernt und relativ zum Browserfenster platziert.
Sie bleiben beim Scrollen der Seite an Ort und Stelle.
Einfluss auf den Fluss:
- Elemente werden aus dem normalen Fluss entfernt
- Werden relativ zum Browserfenster platziert
- Bleiben beim Scrollen der Seite an Ort und Stelle
- Andere Elemente verhalten sich so, als ob diese Elemente nicht existieren
Positionierung sticky
Elemente mit position: sticky verhalten sich wie relativ positionierte, bis sie einen
festgelegten Scrollpunkt erreichen, ab dem sie fixiert werden.
Einfluss auf den Fluss:
- Elemente bleiben im normalen Fluss bis zum Erreichen des Scrollpunkts
- Nach Erreichen des Scrollpunkts wird das Element fixiert und beeinflusst den normalen Fluss nicht mehr
8.3 Visuelle Beispiele für den Einfluss auf den Fluss
1. Beispiel mit fester Positionierung:
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="fixed">Festelement</div>
<div class="content">Scrollbarer Inhalt
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. Beispiel mit klebriger Positionierung:
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="sticky">Klebriges Element</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
GO TO FULL VERSION