====== 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].

===== 1. Der normale Textfluss (Normal Flow) =====

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].

===== 2. Floating (Schwebende Elemente) =====

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].

==== Eigenschaften & Werte ====
  * ''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].

<code css>
img.hero {
  float: right;
  margin-left: 1em;
}
</code>

==== Wichtige Verhaltensregeln beim Floating ====
  * **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].

===== 3. Clearing (Freistellen von geschwebten Elementen) =====

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

==== Eigenschaften & Werte ====
  * ''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].

<code css>
/* Beispiel: h2 wird unter das gefloatete Bild gezwungen */
img.portrait {
  float: left;
  margin-right: 0.5em;
}

h2 {
  clear: left;
  margin-top: 2em;
}
</code>

===== 4. Textumbruchformen mit CSS Shapes =====

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

==== shape-outside ====
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].

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

<code css>
/* 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;
}
</code>

===== 5. Positionierungsarten (position) =====

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].

==== Übersicht der Werte ====
  * **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].

==== Beispiele für Versatz & Containing Blocks ====

<code css>
/* 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;
}
</code>

<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>

===== 6. Stapelreihenfolge (z-index) =====

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].

<code css>
.box-back {
  position: absolute;
  z-index: 1;
}

.box-front {
  position: absolute;
  z-index: 100; /* Liegt im Vordergrund */
}
</code>