Anordnen von Elementen

Überlappen in CSS verschiedene Elemente (meist CSS Ebenen - Layer), kann mit Hilfe des Befehls z-index: xxx die Reihenfolge bzw. die Anordnung definiert werden. Hierbei werden für xxx ganze Zahlen verwendet, wobei für übereinander liegende Elemente das Element mit dem höchsten Wert oben liegt.

Dies ist vor allem beim Arbeiten mit Ebenen (sog. Layer) sinnvoll und nützlich.


Definition in CSS:

div.one {
background: #dfdfdf;
width: 80%;
padding: 50px;
box-sizing: border-box;
position: absolute;
z-index: 1;
}

div.two {
background: #dfdfdf;
width: 80%;
padding: 50px;
box-sizing: border-box;
position: absolute;
z-index: 2;
margin: 25px 0 0 25px;
}

div.three {
background: #dfdfdf;
width: 80%;
padding: 50px;
box-sizing: border-box;
position: absolute;
z-index: 3;
margin: 50px 0 0 50px;
}

Und so schaut's aus