div - beim Fachbereich Informatik - Hochschule Darmstadt

2.2.5 CSS - Layout
Platzierung und Tiefenstaffelung
� beliebige Platzierung mit Verdeckung
� position:
absolute (bezogen auf Elternelement),
relative (bezogen auf ursprüngliche Position),
static (normaler Elementfluss; Normaleinstellung)
� top, (bzw. bottom), left, (bzw. right), width, height
- mit JavaScript dynamisch änderbar � "Animation"
� Tiefenstaffelung explizit mit z-index
� z.B. z-index:3
� je größer die Zahl, desto weiter vorne
� Elemente ohne z-index (entspricht z-index=0)
entsprechend der Reihenfolge in der HTML-Datei
- vor allen Elementen, die nicht absolut positioniert sind
- oben in der Datei � im Hintergrund
- unten in der Datei � im Vordergrund
Beispiel:
position:absolute;
top:35px;
left:240px;
width:150px;
height:150px;
z-index:1
Prof. Dr. R. Hahn, Prof. Dr. B. Kreling, h_da Fachbereich Informatik, Entwicklung webbasierter Anwendungen, SS2009
136