HowTo: Positionierung der Container mit CSS

06. März 2010 um 17:24 | Artikel von Johannes Sebald | 2 Kommentare
Kategorie Webdesign, Webdesign | Kommentare als RSS-Feed

Die Positionierungsmöglichkeiten der Divs (beziehungsweise Layer, Ebenen, Container) werden selten gut erklärt, vor allem im deutschsprachigen Raum. Daher hab ich mich entschlossen, das kleine HowTo von Terrikay (Autorin Teresia Kuhr) zu übernehmen und es wieder zu veröffentlichen, da es die Seite nicht mehr gibt.

Mich hat damals zum Verstehen von CSS dieses HowTo sehr weitergeholfen, da es einfach erklärt wie Divs funktionieren. Hier zwei Ausschnitte als Illustration von diesem Blog:

#inhalt {

background: #fff;

float: left;

width: 520px;

padding: 5px 30px 30px 30px;

border-right: 1px solid #dfdfdf;

}

<!–Das CSS Schnipsel–>

<div id=”inhalt”></div>

<!–Und hier der dazugehörige DIV Container–>

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 eine 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. Der z-index

Nun geht’s 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 aber die Reihenfolge besser bestimmt werden.

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: nur positionierte Elemente können “gestapelt” werden – und das mit dem höheren z-index liegt oben.

 

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 zum Teil größer sind als das Elternelement, richten sich aber an ihm aus.

Das blaue Rechteck steht im Quelltext als erstes, hat aber z-index 1. Das grüne steht später im Quelltext, bleibt aber unter dem blauen, da es mit z-index:0 versehen wurde.

Mehr zum Thema

2 Kommentare

  1. Johannes Sebald antwortete am 05. April 2010 um 14:22

    Hallo, ja die fünf Punkte beinhalten das ganze Howto. Aber die Grundbegriffe der DIVs finde ich sind dadurch sehr gut erklärt und beschrieben, so das man darauf spielend aufbauen kann.

  2. Hubert Sebald antwortete am 20. August 2010 um 15:10

    Hallo, das liegt an deinem seltenen Nicknamen. Wir müssen den aus allen Kommentaren entfernen. Wenn du das möchtest wird das natürlich gemacht.

Einen Kommentar hinterlassen