Der Document Flow
Normalerweise folgen die Elemente einer Webseite dem natürlichen Dokumentenfluss - dem Document Flow.
- Jedes Element wird so weit wie möglich oben und links positioniert.
- Weitere Elemente werden jeweils rechts davon platziert, und zwar so lange, bis kein Platz mehr ist. Dann rutschen sie eine Zeile tiefer und beginnen wieder ganz links.
- Blockelemente reichen über die gesamte Breite des Elternelementes und haben einen integrierten Zeilenumbruch.
position: static
Die normale Positionierung, der Document Flow. Auch wenn es sich etwas seltsam anhört, einen Fluss als statisch zu bezeichnen. Beispiel
Elemente positionieren
Der Document Flow kann jedoch durch folgende Techniken auch umgangen werden:
Versuchen Sie, mit dem Fluss zu arbeiten, nicht gegen ihn.
position: relative
Das Element wird relativ zu seiner normalen Position positioniert. Die folgenden Elemente verhalten sich so, als stünde es an seinem normalen Platz. Beispiel
position: absolute
Die absolute Positionierung eines Elements bezieht sich auf das nächste umschließende Element, welches mit relative, absolute oder static positioniert ist. Ist ein solches nicht vorhanden, erfolgt sie relativ zum obersten Element, also zu html.
Die folgenden Elemente verhalten sich so, als ob es gar nicht da wäre, da es komplett als dem Fluss herausgenommen wurde. Beispiel
float
Float ist kein Wert der Eigenschaft position, sondern eine eigenständige CSS-Eigenschaft mit den Werten left oder right. Die so positionierten Elemente erheben sich aus dem Document Flow, schweben innerhalb ihres übergeordneten Bereiches nach oben und dann auf eine Seite. Beispiel
