z-index wird im IE6 nicht beachtet

[Axel Richter]

Hallo,

Die Reiter sind bereits mit position:relative gesetzt, damit "innerhalb" eines Reiters ein aktiver Reiter mit position:absolute gesetzt werden kann. Dieser wird dann lediglich nach allen Richtungen etwas vergrößert und auf einen Ausgangspunkt 2px links/oben gesetzt, so dass der gewünschte Effekt eintritt: Test2

Leider funktioniert das aber nicht im Internet Explorer (ich habe den IE6 installiert).

Ja, weil _alle_ Tabs position:relative gesetzt sind und die weiter hinten im Quelltext stehenden per default über den weiter vorn stehenden angezeigt werden. Es hilft deshalb nichts, den z-index des _im_ Tab absolut positionierten DIVs zu erhöhen, weil der Tab selbst schon unter dem nächsten Tab liegt. Du müsstest den z-index des Tabs erhöhen, aber nur des aktiven Tabs. In Deinem jetzigen Markup etwa so:

  
...  
      <div class="tab underlay">  
        Einstellungen  
<div class="tab overlay">Einstellungen</div>  
      </div>  
...  

  
.underlay {  
 z-index:1;  
         }  

Oder gibt es einen besseren Ansatz, um den gewünschten Effekt zu erreichen?

Die inaktiven Reiter bekommen einen onClick Handler, der den Inhalt wechselt und dem jeweiligen aktiven Reiter das display:none wegnimmt und bei den anderen entsprechend setzt.

Ich würde aus Deinem DIV-Konstrukt zunächst mal ein UL/LI-Markup machen:

  
    <ul id="header">  
      <li class="tab">  
        Vorschau  
      </li>  
      <li class="tab underlay">  
        Einstellungen  
        <div class="tab overlay">Einstellungen</div>  
      </li>  
      <li class="tab">  
        Info  
      </li>  
    </ul>  

Das DIV."tab overlay" würde ich nicht direkt ins Markup schreiben, sondern vom JavaScript bei Bedarf erzeugen und ins DOM einhängen lassen.

viele Grüße

Axel