CSS Floating und Positionierung

Diese Dokumentation erklärt das Verhalten von Elementen im normalen Textfluss (Normal Flow) sowie Techniken zur Steuerung des Layouts mittels Floating, Clearing, CSS Shapes und verschiedenen Positionierungsarten[cite: 10].

Im normalen Fluss ordnet der Browser Elemente standardmäßig von oben nach unten (in der Reihenfolge des HTML-Quelltexts) und von links nach rechts an[cite: 10]:

• Block-Elemente: Beginnen stets auf einer neuen Zeile und füllen die gesamte verfügbare Breite des Elterncontainers aus[cite: 10].
• Inline-Elemente: Fließen innerhalb des Textes und brechen je nach verfügbarer Breite automatisch um[cite: 10].

Die Eigenschaft float nimmt ein Element aus dem normalen vertikalen Fluss und verschiebt es so weit wie möglich nach links oder rechts[cite: 10]. Nachfolgender Inhalt fließt um das geschwebte Element herum[cite: 10].

• float: left; — Verschiebt das Element nach links[cite: 10].
• float: right; — Verschiebt das Element nach rechts[cite: 10].
• float: none; — Deaktiviert das Floating (Standard)[cite: 10].

img.hero {
  float: right;
  margin-left: 1em;
}

• Fluss-Ablauf: Geschwebte Elemente werden aus dem normalen Layout-Fluss herausgenommen, beeinflussen aber weiterhin den Textfluss um sie herum[cite: 10].
• Container-Grenzen: Geschwebte Elemente bleiben innerhalb des Inhaltsbereichs ihres Eltern-Elements[cite: 10].
• Keine Margin-Kollision: Im Gegensatz zum normalen Fluss kollabieren (kollidieren) Margins bei geschwebten Elementen auf keiner Seite[cite: 10].
• Breitenangabe für Text: Bei geschwebten Textelementen muss eine explizite Breite (width) angegeben werden, da die Standardbreite sonst auf auto steht[cite: 10].
• Vertikale Grenze: Elemente schweben niemals höher als die Stelle, an der sie im HTML-Quelltext definiert sind[cite: 10].
• Mehrere Elemente: Werden mehrere Elemente nacheinander geschwebt, reihen sie sich nebeneinander ein[cite: 10]. Reicht der Platz nicht aus, rückt das nächste Element nach unten und schiebt sich so weit wie möglich zur entsprechenden Seite[cite: 10].

Die Eigenschaft clear verhindert, dass ein Element neben einem geschwebten Element steht, und zwingt es unterhalb des geschwebten Bereichs zu beginnen[cite: 10].

• clear: left; — Platziert das Element unterhalb von links-geschwebten Elementen[cite: 10].
• clear: right; — Platziert das Element unterhalb von rechts-geschwebten Elementen[cite: 10].
• clear: both; — Umgeht geschwebte Elemente auf beiden Seiten[cite: 10].
• clear: none; — Erlaubt das Umfließen von beiden Seiten (Standard)[cite: 10].

/* Beispiel: h2 wird unter das gefloatete Bild gezwungen */
img.portrait {
  float: left;
  margin-right: 0.5em;
}
 
h2 {
  clear: left;
  margin-top: 2em;
}

Mit CSS Shapes lässt sich die geometrische Form anpassen, entlang derer fließender Text ein geschwebtes Element umströmt[cite: 10].

Legt die Abrollkante für den umfließenden Text fest[cite: 10].

• Mögliche Werte: none, circle(), ellipse(), polygon(), url() (nutzt Transparenzen eines Bildes) sowie Box-Modell-Grenzen (margin-box, padding-box, content-box)[cite: 10].

Definiert den Mindestabstand zwischen der definierten Form und dem umgebenden Text (z. B. in px oder em)[cite: 10].

/* Kreisförmiger Umfluss */
img.circle-wrap {
  float: left;
  shape-outside: circle(200px);
}
 
/* Umfluss basierend auf Pfadkoordinaten */
img.custom-shape {
  float: left;
  shape-outside: polygon(0px 0px, 186px 0px, 225px 34px, 0px 300px);
  shape-margin: 10px;
}

Die Eigenschaft position bestimmt das Positionierungsmodell eines Elements[cite: 10]. In Kombination mit den Offset-Eigenschaften top, right, bottom und left wird die genaue Lage festgelegt[cite: 10].

• static: Standardposition im normalen Textfluss[cite: 10]. Versatz-Eigenschaften (top, left etc.) haben keine Wirkung[cite: 10].
• relative: Verschiebt das Element relativ zu seiner ursprünglichen Position im Textfluss[cite: 10]. Der ursprünglich eingenommene Platz im Layout bleibt reserviert[cite: 10].
• absolute: Entfernt das Element vollständig aus dem Textfluss[cite: 10]. Der ursprüngliche Platz schließt sich[cite: 10]. Platziert das Element relativ zum nächsten positionierten Eltern-Container (Containing Block)[cite: 10].
• fixed: Entfernt das Element aus dem Fluss und fixiert es relativ zum Bildschirmfenster (Viewport)[cite: 10]. Es behält beim Scrollen seine Position bei[cite: 10].
• sticky: Eine Mischung aus relative und fixed[cite: 10]. Das Element verhält sich zunächst normal im Fluss, „klebt“ aber an einer definierten Position am Viewport, sobald die entsprechende Scroll-Grenze erreicht wird[cite: 10].

/* Relative Positionierung */
em.highlight {
  position: relative;
  top: 2em;  /* Verschiebt das Element nach UNTEN */
  left: 3em; /* Verschiebt das Element nach RECHTS */
}
 
/* Absolute Positionierung in einem Bezugscontainer */
div.parent-box {
  position: relative; /* Dient nun als Bezugspunkt (Containing Block) */
  padding: 15px;
}
 
div.parent-box span.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

<note alert> Hinweis zu Versatz-Eigenschaften: Versatz-Werte geben an, wie weit ein Element von der jeweiligen Kante weg geschoben wird (z. B. schiebt top: 200px; das Element von oben nach unten)[cite: 10]. Zwei Versatz-Angaben (z. B. top und left) sind in der Regel ausreichend[cite: 10]. </note>

Wenn sich positionierte Elemente überlappen, steuert z-index die Darstellung auf der Z-Achse (Vorne/Hinten)[cite: 10].

• Standardmäßig liegen im HTML-Code weiter hinten stehende Elemente über früheren Elementen[cite: 10].
• Höhere Zahlenwerte für z-index verdecken Elemente mit niedrigeren Werten[cite: 10].
• Funktioniert nur bei Elementen mit einer position ungleich static[cite: 10].

.box-back {
  position: absolute;
  z-index: 1;
}
 
.box-front {
  position: absolute;
  z-index: 100; /* Liegt im Vordergrund */
}