Worin Sie sehen, dass die Kästchen auf einer Seite einem natürlichen Fluss folgen. Überdies lernen Sie, wie Sie den Verlauf dieses Flusses manipulieren und Elemente mit einer Eigenschaft namens position positionieren können.

Die Themen im Überblick:

• 12.1 Flow: Die Seite ist ein langer, ruhiger Fluss
• 12.2 Der normale Fluss der Boxen
• 12.3 Versetzt weiterfließen: position:relative
• 12.4 Raus aus dem Fluss: position:absolute
• 12.5 Absolute Positionierung auf der Beispielsite
• 12.6 Wie ein Fels in der Brandung: position:fixed

Es gibt drei Möglichkeiten, Boxen auf einer Webseite zu positionieren:

• Normaler Flow: Zur Abteilung normaler »Fluss« gehören die bereits bekannten normalen Block- und Inline-Elemente sowie Boxen mit relativer Positionierung.
• Absolute Positionierung: Absolut positionierte Elemente werden ganz aus dem Fluss herausgehoben und sind für die anderen Elemente nicht vorhanden. Dazu zählen position:absolute und position:fixed.
• Float: Schwebende, im CSS-Jargon gefloatete, Elemente sind ein Zwischending. Zuerst wird die Box normal positioniert, dann wird sie zum Teil aus dem Fluss herausgehoben und schwebt so weit wie möglich nach rechts oder links.

In diesem Kapitel lernen Sie die Grundlagen der Positionierung mit position kennen. Danach folgen zwei Kapitel mit den Grundlagen zu float, bevor Sie dieses Wissen in mehrspaltigen Layouts praktisch anwenden. Aber zunächst ein paar Erläuterungen zum Normalzustand einer Webseite, dem document flow.