Ebenen mit CSS (Layer)
Mit Hilfe von CSS können Sie einfach die Positionen von Elementen innderhalb einer Seite definieren. Dies ist exakt möglich, so dass Sie auf Tabellen oder sogenannte Blind-Gifs (leere Bilder als Hilfsmittel zur Positionierung) verzichten können. CSS Ebenen - Layer - können nebeneinander aber auch übereinander und ein- oder ausgeblendet dargestellt werden. Um die Reihenfolge von übereinanderliegenden Ebenen in CSS zu bestimmen dient der z-indexBeispiel - CSS Definition von Ebenen und Layer
<head>
[...]
#ebene1 {
position:absolute;
top:10px;
left:10px;
width:100px;
height:100px;
z-index:1;
}
#ebene2 {
position:absolute;
top:15px;
left:15px;
width:100px;
height:100px;
z-index:2;
}
[...]
</head>
<body>
[...]
<div id="ebene1">Ein Layer</div>
<div id="ebene2">Anderer Layer</div>
[...]
</body>
CSS Ebenen kommen auch bei der Gestaltung von CSS Navigationen und Menüs zum Einsatz.
[...]
#ebene1 {
position:absolute;
top:10px;
left:10px;
width:100px;
height:100px;
z-index:1;
}
#ebene2 {
position:absolute;
top:15px;
left:15px;
width:100px;
height:100px;
z-index:2;
}
[...]
</head>
<body>
[...]
<div id="ebene1">Ein Layer</div>
<div id="ebene2">Anderer Layer</div>
[...]
</body>