Überlappung: `z-index`

Beispiel

Sobald Du mehrere Layer (<div>-Bereiche) definiert und positioniert hast, kann es sein, dass sich die Layer teilweise überlappen. Die Reihenfolge der einzelnen Layer kannst Du mit z-index festlegen.

<style type="text/css"><!--
 .examplediv
 {
  background-color:#efefef;
  border-style:solid #000000 1px;
 }
#divid1
{
 position:absolute;visibility:hidden;
 left:450px; top:350px; width:300px; height:150px;
 z-index:1;
}
#divid2
{
 position:absolute;visibility:hidden;
 left:450px; top:350px; width:300px; height:150px;
 z-index:2;
}
// --></style>

<body>

  <div id="divid1" class="examplediv">
  ...
  </div>

  <div id="divid2" class="examplediv">
  ...
  </div>

Initialwert:	auto
Vererbbar:	Nein
Anwendbar auf:	Positionierte Elemente
Medium:	Visual
Werte:	Ganze Zahlen Ein Layer mit der höheren Zahl liegt über dem Layer mit der niedrigeren Zahl. auto Überlappung entspricht der Reihenfolge der Definition Inherit
Prozentuale Werte:	Beziehen sich auf die Höhe des Eltern Elements.