Das große Thema in CSS: Die Positionierung. Sie umfasst relativ wenige Befehle. Diese haben jedoch eine große Wirkung auf die Darstellung im Browser. Mit diesen Anweisungen werden grundlegende Layouts erstellt wie Raster, Rahmengerüste, Navigationen und Co.
Der Befehl „position“ gibt an, wie das entsprechende HTML Element positioniert wird:
- statisch im normalen HTML / CSS Fluss,
- relativ zum HTML / CSS Fluss,
- absolut (nimmt keine Höhe im HTML / CSS Fluss ein) oder
- fixed (nimmt keine Höhe im HTML / CSS Fluss ein und bleibt beim Scrollen stehen).
Mit float setzen wir Boxen / Block-Elemente nebeneinander. „float:left“ um das entsprechende Element links anzuordnen, auf der rechten Seite wird umflossen – oder umgekehrt mit „float:right;“. Mit clear beenden wir den Umfluss wieder. Der CSS Befehl wird dabei auf das folgende Element angewendet – also auf jenes, das nicht mehr umfließen soll.
Die Angabe „display“ besagt, wie sich das Element verhalten soll:
- none (das Element ist nicht sichtbar),
- block (das Element verhält sich wie ein Block-Element – verursacht somit einen „Absatz“),
- inline (das Element verursacht keinen Absatz) oder
- inline-block (Element verursacht keinen Absatz, es können jedoch Block-Eigenschaften wie Margins hinzugefügt werden).
Durch die Befehle visibility und opacity stellen wir die Sichtbarkeit und die Transparenz ein. Anders als „display:none;“ wird bei „visibility:hidden;“ das Objekt zwar nicht gezeigt, der Platz aber für das Objekt weiterhin freigehalten.
Mit dem z-index können wir die Tiefe des Objektes definieren – ob es sich nun vor oder hinter einem anderen, überlappenden Objekt befindet. Die Anwendung dieses Befehls ist nach CSS Standard nur bei den Position-Parametern „relative“, „absolute“ oder „fixed“ möglich.
| Befehl | Bedeutung | Mögliche Werte |
|---|---|---|
| height | Höhe | Integer Wert in Pixel (px), mm, cm, em oder Prozent (%) |
| width | Breite | Integer Wert in Pixel (px), mm, cm, em oder Prozent (%) |
| max-height | Maximale Höhe | Integer Wert in Pixel (px), mm, cm, em oder Prozent (%) |
| max-width | Maximale Breite | Integer Wert in Pixel (px), mm, cm, em oder Prozent (%) |
position | Positionierung | normal, static, relative, absolute, fixed |
float | umfließen | left, right, none |
clear | umfließen beenden | left, right, both, none |
display | Verhalten des Elements | none, block, inline, inline-block, table-cell, … |
visibility | Sichtbarkeit | visible, hidden |
opacity | Transparenz | Integer Wert 0 – 1. 60%, entspricht einem Wert von 0.6 |
z-index | Ebene | Ebene als Integer Wert. Funktioniert nur bei position:relative/absolute/fixed; |
| overflow | Überlauf | Elemente außerhalb des Objektes: Verbergen (hidden), anzeigen (visible), scrollbar (scroll), automatisch (auto) |
| top | absoluter Abstand nach oben | Integer Wert in Pixel (px), mm, cm, em oder Prozent (%) |
| right | absoluter Abstand nach rechts | Integer Wert in Pixel (px), mm, cm, em oder Prozent (%) |
| bottom | absoluter Abstand nach unten | Integer Wert in Pixel (px), mm, cm, em oder Prozent (%) |
| left | absoluter Abstand nach links | Integer Wert in Pixel (px), mm, cm, em oder Prozent (%) |
