Es gibt drei Möglichkeiten, die vom HTML erzeugten rechteckigen Kästchen auf einer Webseite zu positionieren:

1. Flow: Zum normalen "Fluss" gehören nicht positionierte Block- und Inline-Elemente sowie Boxen mit relativer Positionierung (position:relative).

2. Absolute Positionierung: Absolut positionierte Elemente werden aus dem Fluss herausgehoben und sind für die anderen Elemente nicht sichtbar. Dazu zählen position:absolute und position:fixed.

3. Float: Schwebende, gefloatete Elemente sind ein Zwischending. Zuerst wird die Box im normalen Fluss positioniert, dann wird sie aus dem Fluss herausgehoben und schwebt so weit wie möglich nach rechts oder links.

In diesem Kapitel lernen Sie den normalen Fluss und die Eigenschaft position mit den Werten relative, absolute und fixed kennen.

Flow: Die Seite ist ein langer ruhiger Fluss

Auf einer ungestalteten Webseite folgen die HTML-Elemente dem document flow, dem "Fluss des Dokumentes". Dieser Fluss ist der natürliche Zustand einer Webseite und für Webdesigner so wichtig wie Schwerkraft für Architekten. Im Grunde ist die Sache einfach:

• Das erste Element wird soweit wie möglich links und oben auf der Seite positioniert.

• Weitere Elemente werden jeweils rechts davon angeordnet, und zwar solange bis kein Platz mehr ist.

• Wenn rechts kein Platz mehr ist, rutschen sie eine Zeile tiefer und beginnen wieder ganz links.

Der Flow macht Webseiten flexibel und als Webdesigner sollten Sie diesen Flow verstehen und versuchen mit ihm zu arbeiten, nicht gegen ihn.