Tabellen sind starre Objekte, ihre Position kann kaum beeinflusst
werden. Mit den Ebenen von HTML 4.0 gibt es einen gutes Gegenstück
zu den Tabellen.
Im Gegensatz zu Tabellen kann man Ebenen frei positionieren. Eine
Ebene kann die andere überlappen. Ein solcher optischer Effekt
lässt sich mit Tabellen nur unter Umständen erreichen.
Eine Ebene ist schnell realisiert, eine Mischung aus HTML mit CSS
verfeinert.
<div style="position : absolute; width : 89px; height
: 35px; top : 440px; left : 242px; background-color: #000099; border:
none"></div>
Hier sehen Sie bereits eine komplette Definition. Der Inhalt der
Ebene wird von <div> Tags umschlossen, sie bildet eine
Einheit, die sich mit CSS frei formatieren lässt. Die eigentliche
Definition der Ebene befindet sich jedoch im Style-Attribut des
<div> Tags. Mit position : absolute; wird der Ebene
die Eigenschaft gegeben, das sie sich an kein Element bindet. Im
Gegensatz dazu bindet sich ein Text, an eine Tabellenzelle, in welcher
er steht.
Nach dieser Angabe erfolgt die Größenfestlegung. In unserem
Beispiel ist die Ebene 89 Pixel breit und 35 Pixel hoch.
Die darauf folgende Angabe dient der Positionierung, sie ist mit
zwei Angaben definiert. Die erste ist die Angabe der Entfernung
in der Horizontalen (Links oder Rechts), die zweite Angabe ist die
Position in der Vertikalen (oben oder unten). Weitere Angaben dienen
lediglich der Festlegung des "Aussehens" der Ebene.
Es gibt weitere Typen von Ebenen, speziell in Bezug auf die Positionierung.
Definiert man die Position als absolute, dann hat sie keinen Bezugspunkt
in der Seite, man kann die Ebene einfach überall positionieren.
Wird als Positionstyp jedoch relative angegeben, dann bezieht
sich die Position immer auf das nächstgelegenste Element. Ist
das Element bereits in einer Tabellenzelle am Ende der Seite, dann
beziehen sich alle Angaben in der Ebene auf diese Tabellenzelle.
<div style="position : relative; width : 89px; height
: 35px; top : 440px; left : 242px; background-color: #000099; border:
none"></div>
Gibt man jetzt eine Position an, dann bezieht sich die Ebene auf
die Position der Zelle, und sieht diese als "Startpunk".
Wird beispielsweise bei einem Absoluten Element die top: 110;
gesetzt, dann ist die Ebene 110 px von oben entfernt, bei einer
relativen Ebene ist diese 110px vom Element, auf welches es sich
bezieht, entfernt.
<div style="position : fixed; width : 89px; height
: 35px; top : 440px; left : 242px; background-color: #000099; border:
none"></div>
Wenn Sie als Position fixed wählen, verhält
sich die Ebene wie bei relative, nur das diese beim Scrollen
an ihrer Position stehen bleibt. Diese Eigenschaft wird aber bisher
von keinem Browser unterstützt.
<div style="static : fixed; width : 89px; height :
35px;background-color: #000099; border: none"></div>
static ist hierbei der Standardwert. Der Ebene wird keine
Position gegeben. Sie fügt sich in den Kontext ein.
Wie Sie im oberen Beispiel schon gesehen haben, können Sie
Ebenen auch ineinander verschachteln. Mit der CSS Eigenschaft z-index
können Sie die Lage der Ebene in der Gruppe bestimmen. Je höher
der z-index ist, desto weiter oben liegt das Element.
Das Beispiel von oben:
<div style="position : absolute; width : 91px; height
: 36px; top : 430px; left : 227px; border: none; background-color:
#003366; z-index: 3; visibility: visible"></div>
<div style="position : absolute; width : 92px; height :
35px; top : 425px; left : 277px; border: none; background-color:
#0099FF; visibility: visible; z-index: 2"></div>
<div style="position : absolute; width : 89px; height :
35px; top : 440px; left : 259px; background-color: #000099; layer-background-color:
#000099; border: none; visibility: visible; z-index: 1"></div>
Eine weitere Eigenschaft, die hier in dem Beispiel auch verwendet
wurde, ist die visibility Eigenschaft, welch die Sichtbarkeit
einer Ebene definiert.
visibility: visible
Die Ebene ist sichtbar
visibility: hidden
Die Ebene ist nicht sichtbar
Ebenen machen jedoch immer noch Schwierigkeiten, da diese in den
Browsern oftmals anders dargestellt werden. Vorerst werden Tabellen
die einizigen, wirklichen Layoutelmente bleiben.