Letzte Änderung am 21.01.2005
Cascading Style Sheets - ein Tutorial
Vorbemerkung: Die Kapiteleinteilung hält sich an das Buch von Eric A. Meyer: Cascading Style Sheets, The Definitive Guide, O'REILLY, 2004.
Es soll eine sinnvolle Adaptation der W3C-Regeln zu CSS1, 2 und 2.1.aus der Perspektive von Lernenden sein. Die eingefügten Demos lassen sich-fast ohne Ausnahme-im Quelltext editieren und ansehen. Der Code ist so einfach wie möglich gehalten und das Tutorial kann auch offline benutzt werden. CSS-Bereiche, die in den gängigen Browsern bisher nicht implementiert wurden, werden nicht dokumentiert.
Andreas Lutz MatteDesign, Bern

Kapitelübersicht

Kapitel 10: Floating und Positionierung

• Floating und Clearing (float)
• Basiskonzepte: Positionierung
• Inhaltsüberschuss und Inhaltsbeschneidung (overflow, clip)
• Element-Sichtbarkeit und -Unsichtbarkeit (visibility)
• Absolute Positionierung
• Positionierung auf der z-Achse (z-index)
• Fixe Positionierung (position:fixed)
• Relative Positionierung (position:relative)

Floating
Floating kommt aus HTML2.0 und bezog sich einzig auf Bilder (align="left"/"right").

Gefloatete Elemente werden einerseits aus dem normalen Textfluss entfernt aber sie beeinflussen das gesamte Dokument und die andern Elemente trotzdem.
Grundregeln: Es gibt kein Zusammenfallen von margins in gefloateten und den darum herum fliessenden Elementen. Im Gegensatz zum normalen Textfluss, werden margins benachbarter Elemente addiert. Jedes nicht-ersetzte, gefloatete Element muss eine width-Angabe haben, weil es sonst in sich zusammenfällt. Float:none verhindert ein Element am floaten oder schafft eine Ausnahme bei flottierenden Elementen.

Boxen-Modell in CSS

Details zu float
Der Containing-Block eines gefloateten Elementes ist immer der unmittelbare Vorfahre dieses Elementes.
Ein flottierendes Element erzeugt immer eine Block-Box, unabhängig davon, welche Art von Element es ist. Es verhält sich wie display:block.

Floating-Regeln
1. Höhen-Positions-Regel: Die äussere Ecke eines flottierenden Elementes kann nie weiter oben sein, als die innere Ecke (Content-Bereich) des Elternelementes (Containing Block).

Demo 2

2. Überschneidungs-Regel: Gefloatete Elemente überschneiden sich nie, wenn sie nacheinander definiert werden.

Demo 3

3. Platz-Knappheits-Regel: Nebeneinander gefloatete Elemente stellen sich solange wie der Platz reicht dar. Wenn der Platz nicht mehr ausreicht, wird das nächste Element unterhalb, am Anfang der Zeile positioniert.

Demo 4

4. Erzwungenes Containmant 1: Ein flottierendes Element kann nie weiter oben sein als die innere Höhe des Elternelementes. Falls das flottierende Element zwischen nichtflottierenden Elementen vorkommt, so wird der unmittelbare Vorgänger zum Containing Block gemacht.

Demo 5

5. Erzwungenes Containment 2: Auch ein gefloatetes Vorgänger-Element wird zum Containing Block deklariert.

Demo 6

6. Erzwungenes Containment 3: Auch gefloatete Elemente aus Inline-Elementen deklarieren das Element zum Containing Block.

Demo 7

7. Horizontale Begrenzung gefloateter Elemente: Mehrere gefloatete Elemente gehen, wenn sie die Breite des Containing Block erreichen, immer auf eine neue Zeile. (S. auch Regel 3)

Demo 8

8. Höhenpositions-Regel Ein gefloatetes Element positioniert sich immer so hoch wie möglich.

9. Horizontale Positionsregel: Ein gefloatetes Element geht soweit in die Richtung (links, rechts), wie es kann.

Demo 9

Angewandtes Verhalten
Da gefloatete Elemente nur den linken, rechten und oberen Rand des Mutterelementes berücksichtigen (und nicht die Bottom-Linie), können sie diese überschneiden. (Einige Browser lassen allerdings das Mutterelement nach unten anwachsen, bis das gefloatete Element innerhalb erscheint, was nicht korrekt ist. Es kann also durchaus vorkommen, dass ein gefloatetes Element den äussern Rand eines Elternblocks überschneidet.

Demo 10

Negative Margin-Angaben:
Es ist scheinbar gegen alle Regeln möglich, dass ein flottierendes Element ausserhalb der inneren Ecke des Mutterelements stehen kann. Dies entsteht mit negativen Margins des Elementes (IE versteht das nicht).

Demo 11

Float, Inhalt und Überschneidung:
Wenn ein gefloatetes Element grösser ist als sein Containing Block und ihn überschneidet, gelten folgende Regeln: CSS 2.1
Für Inline Elemente: Sie liegen vollständig über dem Float-Bereich, der es überschneidet.
Für Block-Elemente: Der Content liegt über dem überschneidenden Teil des gefloateten Elementes. Der Rest (borders etc.) unterhalb, also verdeckt.

Aufhebung von Float: Clearing

Clear:left/right/both fügt einem Element soviel margin-top zu, bis es unterhalb der floatenden Elemente zu liegen kommt. Das bedutet, dass die im geclearten Element angegebene margin-top Angabe nicht mehr wirkt. Dies kann umgangen werden, wenn man dem gefloateten Vorgängerelement eine margin-bottom Angabe beigibt. Clear gibt es auch schon in HTML mit der Angabe <br clear="left/right/all">

Demo 12

Weiter zu Kapitel 10.1:Positionierung