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.1: Positionierung Grundlagen

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

Positionierung
Positionierung ist ein zentrales Konzept (neben Floating) für CSS-Design und -Layout. Es erlaubt pixelgenaue Darstellung von Elementen, die mit position: aus dem normalen Textfluss herausgenommen wurden.

static: Normale Boxen und normaler Fluss der Elemente (default)

relative: Relative Abweichung von der Normalposition, wobei der Raum der Normalposition (ohne offset-Angaben) erhalten bleibt.

absolute: Komplette Absonderung des Elementes aus dem normalen Elementfluss.Das Element ist jedoch abhängig von seinem containing Block.

fixed: Verhält sich wie absolute aber der sichtbare Bereich des Bildschirms (Viewport) ist der containing Block.

Der Eltern-Block (containing block)
Gewisse Ähnlichkeiten zu float sind vorhanden. Bei Float ist der Containing-Block das näheste Eltern-Blockelement
Bei der Positionierung gelten in CSS 2.1. die folgenden Regeln:
Der Containimg-Block des Rootelementes (erster Block) wird vom Browser gesetzt. Meist gilt dafür das initiale <html-Element> oder ev. auch das <body-Element>. Es bildet ein Rechteck um den sichtbaren Bereich der gesamten Seite.
Für Nicht-Root-Elemente mit static oder relative-Angaben: Der Containing-Block ist die innere Ecke des Content-Bereichs des am nächsten liegenden Vorgängerblocks, der Tabellenzelle oder aber der direkte Vorgänger eines Inline-Elementes.
Für Nicht-Root-Elemente mit position:absolute: Der Containing-Block ist der direkteste Vorgänger, der keine static-Positionierung hat und zwar folgendermassen:
Bei Vorgänger-Block-Elementen die Padding-Ecke
Bei Vorgänger-Inline-Elementen die innere Ecke (content) Wenn es keine Vorgänger (Anchestors)gibt: Der Containing-Block ist das Root-Element.
Elemente können mit Positionierung, wie bei der Anwendung von negativen Margins, ausserhalb ihrer Vorgänger-Elemente gesetzt werden.

Offset Eigenschaften

Die Offset-Eigenschaften beziehen sich immer auf den Contaning-Block. Sie gelten (ausser bei WIN/IE) nicht als Basis für Längen- oder Breitenberechnungen, sondern als Positionierung .
Alle Boxenangaben (margins,paddings, borders, contents) werden in die Positionierung einbezogen.
Beispiel: top: 50%; bottom:0; left:50%; right:0; Positioniert ein Element direkt in die untere Ecke des Containing-Block-Elementes.

Demo 1

Etwas anders verhalten sich Offset-Prozentangaben. Sie berücksichtigen die effektive Höhe und Breite des Containing-Block.

Demo 2

Negative Offsetwerte setzen eine Position ausserhalb des Elternelementes.

Width und Height
Diese Angaben sind nicht immer notwendig, weil die Offset-Eigenschaften sie bereits definiert haben. Wird left und right gesetzt, ist width bereits definiert. Dasselbe geschieht, wenn top und bottom gesetzt werden. In all diesen Fällen, wird der width und/oder height-Wert auf 'auto' gesetzt und nimmt soviel Raum ein, wie notwendig. Wenn zu height- oder width-Anagben zusätzliche Margins, Borders oder Paddings hinzugefügt werden, verändert sich gemäss Boxen-Modell die Gesamtlänge des Elementes.

Demo 3

Beschränkung der Längen- und Breitenangaben (min width/height, max width/height)

Diese an sich nützlichen Attribute sind nicht Cross-Browser fähig und werden deshalb selten eingesetzt.

Inhaltsüberhang und Inhaltsbeschneidung (overflow, clipping)

Demo 4

Wenn der Content die Ränder des definierten, positionierten Elementes überschreitet, fliesst er über. Overflow: regelt die Art der Darstellung dieses Überhanges.
Visible bedeutet, dass der Content ausserhalb der definierten Box sichtbar ist. Entsprechend kann dieser Inhalt auf scroll oder hidden, oder auto gesetzt werden.

Demo 5

Wertepaare können mit oder Kommata abgegrenzt werden.
Sie sind keine Offset-Angaben, sondern effektive Längenwerte welche ein Rechteck genau definieren. Die Werte definieren in der Reihenfolge: oben, rechts, unten, links.
Es ist ebenfalls möglich, die clipping-area ausserhalb der Element-Box zu verschieben. Die clip-Syntax ist – bedingt durch historische Umstände – eher etwas CSS-fremd, aber sie hat sich so durchgesetzt.

Element Sichtbarkeit (visibility)

Demo 6

Regelt die Sichtbarkeit oder die Unsichtbarkeit eines Elementes. Das Attribut collapse ist nur bei Tabellen anwendbar. Im Gegensatz zu display:none bleibt der besetzte Raum des Elements erhalten. Da visibility vererbt wird, müssen Kindelemente speziell von der Unsichtbarkeit befreit werden:
Beispiel: p.clear {visibility: hidden} p.clear em{visibility:visible}

Weiter zu Kapitel 10.2: Positionierung