Mit Hilfe von Ebenen könnten Tabellen schon bald der Vergangenheit angehören. Mit dem HTML-Tag <div> hatte jeder schon einmal zu tun. Oft verwendet man es zur einfachen Textausrichtung, z. B. zum Zentrieren von Text: <div align="center">Mein Text</div>. Unter Verwendung von CSS 2.0 wird das DIV-Tag aber zum ultimativen Element, das ganze Tabellen ersetzen kann. Ein kleines Beispiel: <div style="position : absolute; width : 250px; height : 250px; top : 200px; left : 100px">Mein Text</div> Der obige Code erzeugt eine Ebene mit einer Höhe ("height") und Breite ("width") von jeweils 250 Pixeln. Der Abstand der Ebene vom linken Bildschirmrand ("left") beträgt 100 Pixel, der Abstand vom oberen Bildschirmrand ("top") beträgt 200 Pixel. Das Attribut "position" bezeichnet die Art der Positionierung und kann einen von vier Werten enthalten, nämlich "absolute", "fixed", "relative" oder "static". "absolute" bezeichnet eine absolute Positionierung, gemessen am übergeordneten Elternelement. Besitzt das Element kein explizit festgelegtes Elternelement (z. B. andere Ebenen), so ist das Elternelement das Tag <body>, also die HTML-Seite an sich. "fixed" ist ein nach dem CSS 2.0 Standard erlaubter Wert, wird aber weder von Netscape noch dem Internet Explorer interpretiert. Er ist vergleichbar mit "absolute", das Element bleibt aber beim Scrollen stehen. "relative" steht für eine relative Positionierung des Elements. Relativ bedeutet, dass die Position nicht ausgehend vom Elternelement, sondern von der Normalposition des Elements aus berechnet wird. Befindet sich das Element zum Beispiel schon im "normalen" Zustand 100 Pixel vom oberen Rand der HTML-Seite entfernt - etwa weil sich ein Bild oder Text darüber befindet - und bekommt es einen "top"-Wert von 50 Pixeln bei einer relativen Positionierung zugewiesen, so befindet es sich schließlich 150 Pixel vom oberen Seitenrand entfernt. Unter Verwendung von "absolute" würde der Abstand zum oberen Seitenrand 50 Pixel betragen. "static" schließlich ist der Standardwert, bei dem keine spezielle Positionierung festgelegt ist. Ebenen lassen sich nicht nur frei positionieren, sie erlauben sogar eine Überlagerung, was unter Verwendung von Tabellen mit vergleichsweise extrem hohem Aufwand verbunden ist. Ein kleines Beispiel: <div style="position : absolute; width : 250px; height : 250px; top : 200px; left : 100px; background-color : Green; z-index : 0">Ebene 1</div> <div style="position : absolute; width : 250px; height : 250px; top : 250px; left : 150px; background-color : WhiteSmoke; z-index : 1">Ebene 2</div> Wie Sie sehen, befindet sich nun neben einem Attribut zum Festlegen einer Hintergrundfarbe ("background-color") das Attribut "z-index" in der Style-Definition. "z-index" bezeichnet die Reihenfolge, in der die Ebenen übereinander gestapelt werden. Dabei besitzt die oberste Ebene den höheren Wert für "z-index".
