Layout

Elemente können in CSS auf verschiedene Arten positioniert werden: statisch, relativ, absolut und fixiert. Das Webseiten-Layout selbst wird zumeist über statische Positionierung gestaltet. Einige Bestandteile einer Seite (wie z. B. Kopf- und Fußzeile) können aber durchaus absolut oder fixiert positioniert werden. Um die Art der Positionierung festzulegen, gibt es die Eigenschaft position.

Statische Positionierung

Die statische Positionierung kann über den Wert static festgelegt werden. Die Angabe dieser Positionierungsart ist jedoch zumeist nicht notwendig, da static die Voreinstellung ist. Eine statische Positionierung bedeutet, dass die Elemente so positioniert sind wie diese im HTML-Code notiert sind. Die Positionierung erfolgt also untereinander oder nebeneinander (je nach Typ und Größe). Zur statischen Positionierung gibt es neben der margin-Eigenschaft, welche Sie bereits kennengelernt haben und einen Abstand zu anderen Elementen herstellt, noch die float-Eigenschaft. Mit der float-Eigenschaft lassen sich Elemente fließend platzieren. Diese Eigenschaft wird unter anderem gerne dazu genutzt, ein Bild in einen Textfluss einzubinden. Als Werte für float sind none (kein Umfluss), left (Positionierung links) und right (Positionierung rechts) möglich.

img
{
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
}

Neben der Einbindung von Elementen in einen Textfluss kann die float-Eigenschaft auch einfach nur zur Positionierung genutzt werden. Dieses Verfahren wird z. B. verwendet, wenn wir ein mehrspaltiges Layout erstellen wollen. Werden mehrere Elemente links oder rechts positioniert (so wie auch im Beispiel), dann muss auf die Notationsreihenfolge im HTML-Code geachtet werden. Bei Elementen die links platziert werden sollen, wird das erste Element ganz links platziert. Bei Elementen die rechts platziert werden sollen, wird das zuerst notierte Element ganz rechts platziert.

div
{
	width: 200px;
	height: 200px;
}

#links
{
	float: left;
	background-color: red;
}

#links2
{
	float: left;
	background-color: lime;
}

#rechts
{
	float: right;
	background-color: blue;
}

#rechts2
{
	float: right;
	background-color: yellow;
}

Immer wieder kann es vorkommen, dass Sie einen mit der float-Eigenschaft erstellten Umfluss beenden wollen. Ein typisches Beispiel ist folgendes: Sie haben ein Bild auf der linken Seite und einen Text auf der rechten Seite. Darunter sollen nun eine Überschrift und ein weiterer Text folgen. Das Bild ist aber höher als der erste Text. Nun haben wir das Problem, dass die Überschrift und der zweite Text direkt unter dem ersten Text platziert werden. Dies ist aber nicht gewünscht. Um dieses Problem zu lösen, können wir die clear-Eigenschaft verwenden. Als Werte für die clear-Eigenschaft sind none (Voreinstellung), left, right und both möglich. left bewirkt, dass das Element unterhalb des linken Elements positioniert wird. right bewirkt das gleiche nur eben für die rechte Seite. Mit both wird sichergestellt, dass sich das Element unterhalb beider / aller Elemente befindet. Da dies in den meisten Fällen erwünscht ist, wird both als Wert zumeist bevorzugt.

<img src="/Bilder/Logo/Logo.png" alt="Logo" title="Homepage-Webhilfe" />
<p>...</p>
<div>Beispiel zur statischen Positionierung von Elementen in CSS aus dem Tutorial von Homepage-Webhilfe</div>

img
{
	float: left;
	width: 250px;
}

p
{
	float: left;
	width: 490px;
	margin: 0 0 0 10px;
}

div
{
	clear: both;
	width: 750px;
	padding: 10px 0 0;
	text-align: center;
	font-style: italic;
}

Absolute Positionierung

Über den Wert absolute in der position-Eigenschaft können wir ein Element absolut positionieren. Die Positionierung erfolgt dabei über die Eigenschaften left, top, right und bottom. Die gleichzeitige Verwendung der Eigenschaften top und bottom und der Eigenschaften left und right ist nicht möglich. Die absolute Positionierung erfolgt standardmäßig in Bezug auf die ganze Seite (body-Element) und nicht in Bezug auf das Eltern-Element. Wollen wir die Elemente absolut in Relation zum Eltern-Element platzieren, so können wir dem Eltern-Element den Wert relative in der position-Eigenschaft zuweisen.

div
{
	position: absolute;
	width: 200px;
	height: 200px;
}

#box1
{
	top: 50px;
	background-color: red;
}

#box2
{
	left: 300px;
	background-color: lime;
}

#box3
{
	right: 50px;
	background-color: blue;
}

#box4
{
	bottom: 150px;
	right: 0px;
	background-color: yellow;
}

Bei der fixierten Positionierung (position="fixed") erfolgt die Positionierung wie bei der absoluten Positionierung nur mit dem Unterschied, dass als Bezugspunkt das Browserfenster verwendet wird. Deshalb ist diese Positionierung z. B. ideal für „fixierte Fußzeilen“.

Überlappung und Überlauf

Haben wir mehrere Elemente die sich gegenseitig überlappen, wird im Vordergrund das zuletzt notierte Element (im HTML-Code) angezeigt. Um diese sogenannte Stapelreihenfolge zu ändern, gibt es in CSS die Eigenschaft z-index. Als Wert der Eigenschaft wird eine Zahl (ohne Einheit) angegeben. Umso größer die Zahl ist, umso weiter im Vordergrund befindet sich das Element. Die z-index Eigenschaft kann nicht bei statisch angeordneten Elementen eingesetzt werden.

div
{
	position: absolute;
	width: 200px;
	height: 200px;
}

#box1
{
	z-index: 1;
	background-color: red;
}

#box2
{
	top: 50px;
	left: 50px;
	z-index: 0;
	background-color: lime;
}

Über die Eigenschaft overflow lässt sich der sogenannte Überlauf steuern. Ein Überlauf entsteht, wenn der gewünschte Inhalt nicht mehr in das Element hineinpasst. Dies kann natürlich nur passieren, wenn dem Element eine feste Höhe zugewiesen ist. Als Werte für die overflow-Eigenschaft stehen folgende Werte zur Verfügung:

visible	Der Überlauf wird angezeigt, jedoch außerhalb des Elements.
hidden	Der Überlauf wird nicht angezeigt.
auto	Der Überlauf wird im Element angezeigt. Hierfür werden falls benötigt Scrollbalken angezeigt. (Standardeinstellung)
scroll	Der Überlauf wird im Element angezeigt. Das Element verfügt immer über beide Scrollbalken.

p
{
	width: 250px;
	height: 150px;
	margin-bottom: 50px;
	border: 1px solid black;
}

#text1
{
	overflow: visible;
}

#text2
{
	overflow: scroll;
}

#text3
{
	overflow: hidden;
}

#text4
{
	overflow: auto;
}

Um den Überlauf nur für die X- oder Y-Achse zu steuern kann, an Stelle der overflow-Eigenschaft, die Eigenschaft overflow-x und overflow-y eingesetzt werden. Die dort verfügbaren Werte entsprechen der overflow-Eigenschaft.