9.6.4 Ebenen
Mit CSS können Elemente wie Folien (Ebenen) übereinander gelegt werden. Die Ebenen werden entlang einer dritten Koordinatenachse z angeordnet. Jede Ebene erhält eine ganzzahlige Koordinate auf dieser Achse, wobei die unterste Ebene erhält die Koordinate 1 aufweist. Die in Ebenen angeordneten Layout-Objekte können sich teilweise oder ganz überlappen, wobei Objekte oder Teile von Objekten mit niedrigeren z-Koordinaten von darüberliegenden Objekten verdeckt werden.
Die Spezifikation der z-Koordinate für ein Layout-Objekt erfolgt mit der CSS-Eigenschaft z-index. Als Wert muss eine positive natürliche Zahl angegeben werden. Ein interessantes Anwendungsbeispiel ist Schrift mit Schatten:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Schrift mit Schatten</title>
<style type="text/css">
<!--
h2 { font-size:64pt; color:#F00; position:absolute;
left:20px; top:200px; z-index:10; }
h2.schatten { font-size:64pt; color:#CCC; position:absolute;
left:24px; top:204px; z-index:9; }
//-->
</style>
</head>
<body>
<h2>Schatten</h2>
<h2 class="schatten">Schatten</h2>
</body>
</html> |