Hier bist Du: Home « Positionieren « z-index

Ü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.
Wert Internet Explorer Opera Netscape Mozilla/ Seamonkey Mozilla Firefox Safari Konqueror
5 5.5 6 MAC 5+ 5 6 7+ 4 6 7+ 1+ 0.8+ 1.0+ 3.3+
  j j j j j j j j j j j j j j