HowTo: Positionierung der Container mit CSS
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?
Maßangaben können mit festen (wie px) oder auch mit relativen Werten(%, em) angegeben werden.
2. Das Floaten
Wie bekomme ich nun aber Elemente nebeneinander? Zum Beispiel mit der Angabe float. Hier mal wieder ein paar Beispiele:
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 ;-)
…blabla
4. Relative Positionierung:
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.