Die Positionierung der Container mit CSS

Die Positionierungsmöglichkeiten der Divs werden selten gut erklärt, vor allem im deutschsprachigen Raum. Daher hab ich mich mal entschlossen, selber ein kleines Tutorial zu schreiben - jetzt, wo ichs endlich kapiert hab! *g*
Vielleicht hilfts ja dem einen oder anderen tatsächlich.
Eine kurze Anmerkung zur Bezeichnung: Mal heißen sie Ebenen, oder auch englisch Layer, das dann so ins Deutsche übernommen wird. Ich finde das immer etwas missverständlich, da ich mit "Ebene" immer was dreidimensionales verbinde. Ich hab mich hier einfach mal für die Bezeichnung "das Div" entschieden, mit der Benennung einfach nach dem Element - ich denke, es wird klar, was gemeint ist. Allerdings lassen sich fast alle Positionierungsangaben genauso auch auf andere Elemente anwenden - nicht nur auf die Divs, die ja sonst selber keine Eigenschaft haben.

1. Position static:

Dies ist die Normalposition, man braucht es also nicht extra hinzuschreiben. Wie verhalten sich die Divs also im Normalfall?

Wird nichts besonderes angegeben, dann wird das Div einfach immer die gesamte Breite einnehmen und genauso hoch werden, wie sein Inhalt.So wie dieses hier - der Rand ist zur Verdeutlichung.

Das nächste Div wird sich einfach drunter legen - ohne Abstand, so wie dieses hier.

Selbstverständlich können die Divs auch Weiten-und Höhenangaben mit width und height bekommen, so wie dieses hier, das eine Weite von 300px hat.
Maßangaben können mit festen (wie px) oder auch mit relativen Werten(%, em) angegeben werden.

obwohl rechts noch genug Platz wäre, legt sich dieses Div wieder unter den mit dem roten Rahmen - so geht die normale Positionierung - immer eins unter dem anderen, ohne Abstand dazwischen...

2.Das Floaten:

Wie bekomme ich nun aber Elemente nebeneinander? Zum Beispiel mit der Angabe float. Hier mal wieder ein paar Beispiele:

Dieses Div wurde mit float:left versehen. Es bleibt also links und folgende Divs werden dann einfach so positioniert, als ob es nicht da wäre - deren Inhalt wird aber nach rechts gedrückt und bleibt sichtbar!

Dieses Div ist normal static positioniert. Es benimmt sich daher ganz normal - nimmt also hundert Prozent der Breite ein und wird genauso hoch wie nötig. Zu erkennen ist das an der Hintergrundfarbe. Nur der Text verhält sich scheinbar merkwürdig. Er wird nach rechts gedrängt vom floatenden Container, der den Inhalt nicht verdeckt, sondern einfach zur Seite schiebt, was man gut nutzen kann.

Dieses Div ist nach rechts gefloatet worden - hier passiert dasselbe wie eben! Auch dieses Div verdrängt den Text, läßt die nachfolgenden Divs als solche aber unberührt - gut zu erkennen an der Hintergrundfarbe. Dieses Div hat lediglich einen blauen Rahmen zur Verdeutlichung.

Dieses Div steht im Quelltext nach dem rechts floatenden. Das ist wichtig. Immer erst das floatende Div notieren und dann die anderen, die sich dann darunterlegen. Wie man sieht, wird der Text dieses Divs sowohl vom rechts, wie auch vom links gefloateten in den sichtbaren Bereich gedrängt.Der Inhalt bleibt also immer sichtbar beim Einsatz von float.

Wenn ich möchte, dass sich ein Div unter einen gefloatetes Div legt, dann muss ich das mit dem Befehl clear machen. Es gibt clear:left, clear:right und clear:both. - Dieses Div hat die letzte Anweisung bekommen und legt sich daher nun unter sämtliche vorher gefloateten Divs.

Wenn die floatenden Divs nun wirklich nebeneinander stehen sollen, dann muss jedes von ihnen die Eigenschaft float bekommen.

So kann man dann problemlos auch die Divs nebeneinander bekommen.

der nächste ;-)

der letzte in der Reihe - dieser hüpft nun allerdings nach unten, weil er keinen Platz mehr in der Reihe hat.

Wie man sieht, kann man mit der Eigenschaft float ne ganze Menge machen. Viele Layouts lassen sich alleine durch geschickten Einsatz von float realisieren.

3.Absolute Positionierung:

Komischerweise wird die absolute Positionierung sehr häufig angewandt. Es ist leider auch die einzige Positionierungsart, die von den WYSIWYG-Editoren angeboten wird. Dabei widerspricht es eigentlich mehr oder weniger dem Grundgedanken der CSS-Designs. Wie geht aber nun die absolute Positionierung:

Für eine absolute Positionierung gibt man neben dem Befehl position:absolute noch Koordinaten an - für das rote Div hier z.B. top:20px und left:30px.Bezugspunkt ist dabei immer die linke obere Ecke.
Absolut positionierte Divs richten sich entweder nach dem Elternelement, dass absolut oder relativ positioniert sein muss (hier mit schwarzem Rand versehen) - wenn kein weiteres Elternelement da ist, dann richten sie sich einfach nach dem Body.

Absolut positionierte Divs können auch übereinander positioniert werden - die nehmen keine Rücksicht aufeinander wie die floatenden. Auch der Text wird einfach überdeckt. Wer als letztes im Quelltext steht, ist oben (wie hier der blaue).Das geht übrigens ganz ohne z-index - der kommt später noch ;-)

ein wenig Test-Text
...blabla

noch ein wenig Test-Text

4.Relative Positionierung:

Bei relativ positionierten Elementen ist der Bezugspunkt nicht das Elternelement, sondern die natürliche Position, die es bei einer static-Positionierung hätte. Von dieser aus kann das Div dann verschoben werden.

So wie dieses hier, das einfach um 15 pixel nach links und 5px nach unten verschoben wurde.

Die nachfolgenden Divs kümmern sich dann aber nicht um das verschobene Div, sondern tun so, als sei es normal (static) positioniert. Dadurch wird unter Umständen Text einfach verdeckt - man sollte sich also gut überlegen, ob und wie man diese Möglichkeit einsetzt.
Durch die Positionsbezeichnung position:relative hat man aber die Möglichkeit, innerhalb des Containers andere Divs absolut zu positionieren, so wie oben bei Beispiel 3 gezeigt.

5.Position:fixed

Vielleicht ist Euch ja schon das kleine blaue Kästchen oben rechts aufgefallen - das ist ein mit position fixed positioniertes Div. Die Position am Bildschirm bleibt unverändert, auch beim Scrollen. Allerdings funktioniert das nicht mit dem IE, der das Kästchen einfach hier zeigt, als sei es statisch positioniert. Insofern kann man diese Positionierung in der Praxis nicht wirklich einsetzen oder nur mit vielen Workarounds für den IE - schade eigentlich!

6.Der z-index

Nun gehts in die Höhe und die Divs werden wirklich zu Ebenen, die übereinander gestapelt werden können. Das geht, wie vorhin schon angemerkt, allerdings auch ohne z-index - mit dem z-index kann ich aber die Reihenfolge besser bestimmen. Dennoch wird der z-index zu häufig sinnlos angewandt und ich hab schon abenteuerliche Werte in Quelltexten gesehen (z-index 100 z.B.). Es gilt: das Div mit dem höheren z-index ist oben und man kann nur gleichartige Elemente stapeln - eigentlich nur absolut oder relativ positionierte (und jeweils gleiche), da die anderen ohnehin "Rücksicht aufeinander nehmen" und sich "aus dem Weg gehen".

Dieses Beispiel ist ganz interessant: Das rote Div wird relativ positioniert - die anderen beiden (grün und blau) befinden sich darin. Das rote ist also das Elternelement, das nicht "gestapelt" werden kann - egal welcher z-index - es bleibt unten.(hier mal zur Verdeutlichung mit z-index:2 ausgezeichnet - ist aber eigentlich völlig überfllüssig und soll nur demonstrieren, dass das Div in diesem Fall sowieso nicht darauf reagiert.)
Die anderen Elemente, obwohl sie herausragen und z.Tl größer sind als das Elternelement, richten sich aber an ihm aus.
Der blaue steht im Quelltext als erstes, hat aber z-index 1. Der grüne steht später im Quelltext, bleibt aber unter dem blauen, da er mit z-index:0 versehen wurde.

Ich hoffe, die Positionierung der Elemente mit CSS ist nun etwas deutlicher geworden.Wenn es Fragen gibt, gerne eine Mail an mich, allerdings weiß ich auch längst nicht alles, sondern bin selber noch am Lernen.