Was ist Positionierung
Als Positionierung wird die Anordung von HTML-Elementen auf einer Webseite bezeichnet. Sinn und Zweck des Einsatzes von CSS ist hierbei die komplette Trennung zwischen Inhalt und Struktur/Aussehen einer Internetpräsenz. So sollten sich in einer HTML-Datei im optimalen Fall keinerlei Angaben zur Größe, Anordung und dem Aussehen der einzelnen HTML-Elemente mehr befinden.
Das Tabellenlayout
Füher war die einigste Möglichkeit Elemente auf einer Webseite auzurichten das sogenannte Tabellenlayout. Der komplette Inhalt einer Seite wurde auf die verschiedenen Zellen in der Tabelle verteilt, und diese dann durch Größeangaben an die gewünschte Position gebracht. Diese Technik bringt einige Nachteile mit sich. Zum Einen kann die Positionierung des kompletten Inhalts in einer Tabelle sehr unflexibel und mühsam sein, was auch automatisch einen langen, "aufgeblähten" Code zur Folge hat,der sich auf die Ladezeiten und das Trafficvolumen ausübt. Und somit sogar für eine viel besuchte Internetpräsenz richtig teuer werden kann. Zum Anderen weisen sich auch im Blick auf die immer mehr diskutuierte Barrierefreiheit deutliche Nachteile auf. So wird der Transport von Webinhalten, die durch ein Tabellenlayout realisiert sind, auf internetfähige Endgeräte (z.B. Palm, Handy) fast unmöglich. Auch werden z.B blinde Personen die auf sog. Screenreader angewiesen sind komplett. ausgeschlossen, da dieser Tabelleninhalte immer linear von links nach rechts ausgibt.
Positionieren mit CSS
Zur Positionierung von HTML-Elementen stellt uns CSS mächtige Hilfsmittel zur Verfügung, die uns erlauben jedem einzelenen Element sog. Style-Attribute zu zuweisen. Das zur Positionierung am häufigsten verwendete HTML-Element ist das sog. Div-tag, oder häuftig auch als Layer oder Ebene bezeichnet. Durch CSS-Zuweisungen kann die Position, Größe und Lage zu anderen HTML-Elemementen bestimmt werden, und somit die Anzeige im Browserfenster beeinflusst werden.
Das CSS-Attribut position:
Zunächst muss erwähnt werden dass HTML-Elemente einem sog. Elementfluss unterworfen sind. Man unterscheidet hierbei zwischen Inline-Elementen und Block-Elementen. Block-Elemente erzeugen im Textfluss immmer einen eigenen Absatz, das heißt es wird in der linearen Darstellung immer ein neuer Absatz begonnen. In anderen Worten: Blockelemente ordnen sich in der Regel immer untereinander an. Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss, sie werden als untergeordnete Elemente in Blockelementen eingesetzt. Das oben angesprochene DIV-Element is ein Block-Element und ordnet sich also in der Regel immer unter dem vorausgehenden Block-Element an. Um HTML-Elemente aus dem "normalen" Textfluss zu nehmen bietet uns CSS das Attribut position mit den Werten: absolute, fixed, inherit, static und relativ.
Position: static;
Dies ist ein als static definiertes Div-Element. Da die static Positioninierung dem normalen Elementfluss entspricht braucht sie nicht extra angegeben werden. Das div-Element nimmt hierbei, wenn nicht anderst angegeben, die Größe seines Inhalts an.
Durch die Angabe von width: und height lässt sich die Größe des Div's bestimmen
Da das Div ein Blockelement ist wird bei postion:static; immer eine neue Zeile im Textfluss begonnen auch wenn hier rechts neben dem blauen div noch genügend Platz vorhanden ist.
Position: absolute;
Mit der Eigentschaft position: absolute; lässt sich das Div-Element aus dem Elementfluss nehmen und durch die Werte top, bottom, right und left pixelgenau im Browserfenster plazieren. Die Ausgangspoition ist immmer die linke obere Ecke des Elternelements. Hierbei ist darauf zu achten dem Elternelement die position: relaive; mitzugeben! Ist kein Elternelement vorhanden beziehen sich die Angaben immer auf dem Body.
Browserfenster
Im Browserfenster mit den Angaben top: und left: positioniert
Die Elemente sind aus dem Elementfluss genommen und nehmen keine Rücksicht mehr aufeinander. Sie können sich also auch überdecken.
Position: relative;
Ein Div dem der Wert position: relative; zugewiesen wurde verhält sich zunächst wie ein als position: static; definiertes div. Es besteht aber die Möglichkeit durch die Angabe von top: und left: das div in seiner Position zu verschieben. Dies geschieht allerdings nicht wie bei position: absolute; in Abhängigkeit von der linken, oberen Ecke des Elternelements, sondern in Abhängigkeit zur "normalen" Position die das Element im Textfluss einnehmen würde.
Hier zunächst ein als relative Positioniertes div ohne Verschiebung, es verhält sich wie ein als static positioniertes div
Dieses div ist mit den Angaben top: und left: relativ zu seiner normalen Position im Textfluss verschoben
Dieses div ist wieder normal im Textfluss mit der position static (oder keiner). Achtung: das zuvor mit position: relative; definierte div nimmt keine Rücksicht auf nachfolgende Elemente und verdeckt gegebenenfalls den Text
Position: fixed;
Vielleicht ist euch schon aufgefallen, dass sich das Mädel, am unteren rechten Bildschirmrand, beim Scrollen nicht mitbewegt. Dies wird durch die Eigenschaft fixed reicht. Das große Problem mit position: fixed; ist das sie der Internet Explorer der Frima Microsoft nicht interpretiert. Und somit nur anständigen Browsern wie dem Mozilla Firefox vorbehalten ist. Es bleibt jedoch zu hoffen, dass es Mircosoft irgendwann einmal gelingt W3C Standarts in ihren Browsern zu implementieren. Bisher ist der Einsatz der position: fixed; im Internet Explorer nur durch ein ziemlich umständliches Workaround zu erreichen. Was aber hier zu weit führen würde.
Position: inherit;
Das Attribut position: inherit; ist im eigentlichen Sinn kein Element zur Positionierung. Es sagt lediglich aus, dass ein div mit position: inherit; die Positionierungsart seines Elternelements erbt.
Das CSS-Attribut float:
Richtig eingesetzt ist das float Attribut eines der mächtigsten und zugleich anspruchsvollste Mittel, in der Positionierung mit CSS. Mit dem Attribut position: haben wir, einmal abgesehen von der suboptimalen position: absolute;, bisher noch nicht die Möglichkeit zwei div's nebeneinander zu positionieren. Gefloatete Elemente sind wie absolut positionierte Elemente aus dem Textfluss ausgenommen, haben aber den Vorteil im Gegensatz zu den absolut positionierten Elementen, direkt nach dem letzen vorausgehenden Blockelement angeordnet zu werden. Das Attribut float kann die Werte left und right annehmen kann, was zum Beipiel für ein mehrspaliges Layout (Menü links, Inhalt rechts daneben) unabkömmlich ist.
hier ein "left" gefloatetes div
hier ein "right" gefloatetes div
Der Inhalt im nachfolgenden div, in diesem Fall Text macht automatisch für die gefloateten div's Platz. Es kommt also zu keiner Überlagerung
Mit dem Attribut clear im nachfolgenden Element kann eine Überlagerung verhindert werden und das div ordnet nach dem gefloateten Element an. Clear kann die Werte: left, right und both annehmen, in diesem Fall wird nur das überlappen des links gefloateten divs durch die Eigenschaft clear:left; verhindert
Das Feintuning - Margin: und Padding:
Neben den Attributen position und float stehen uns noch zwei weitere Attribute zur Ausrichtung von HTML-Elementen zu Verfügung, margin und padding. Sie werden aber hauptsächlich dazu benutzt den Abstand der einzelnen Elemente zueinander zu bestimmen.
Margin - der Außenabstand
Das Attribut margin gibt es in vier verschiedenen Formen: margin-right, margin-left, margin-bottom, margin-top. Es beschreibt jeweils den äußeren Abstand eines Elements zu seinen Nachbarelementen. Zur Verdeutlichung ein kleines Beispiel: Wir haben ein div-Element das Text enthalten soll, also einen p-tag. Ohne Formatierung durch CSS sieht das ganze so aus.
Ich bin ein Text in einem p-tag ohne Angaben zum Außenabstand
Der p-tag mit dem enthaltenen Text positioniert sich gemäß dem Elementfluss an der linken, oberen Ecke des div-Elements. Das kann unter Umständen von Nachteil sein. Durch die Zuweisung des Attributs margin kann man nun den Abstand des Texts zum umgebenden div-Element ändern.
Ich bin ein Text der sich durch die Angabe von margin-top und margin-left auf Abstand hält
Padding - der Innenabstand
Das Attribut padding beschreibt im Gegensatz zu margin den Innenabstand in einem Element und steht somit auch in den Varianten: padding -right, padding-top, padding-left und padding-bottom zur Verfügung. Oftmals lässt sich nicht erkennen (ohne in den Quelltext zu schauen) ob ein umschließendes Element seine umschlossenen Elemente mit padding "auf Abstand hält", oder ob sich die Elemente selber mit margin "auf Abstand halten". Der Einsatz von padding anstellte von margin macht aber zum Beispiel Sinn, wenn es darum geht meherer umschlossenen Elemente "auf Abstand zu halten". Da so nur dem umschließenden Element das Attribut padding mitgegeben werden muss. Auch hierzu ein Beispiel: Ein Text mit einer Beispielgrafik und einem Hyperlink sollen in einem div-Element positioniert werden.
