Hallo!
Ich habe eine Anwendung, wo verschiedene Inhalte per Karteireiter ausgewählt werden können. Bisher habe ich die Reiter mit fester Größe und position:absolute gesetzt und konnte daher auch problemlos einen "aktiven" Reiter darüber positionieren.
Nun möchte ich das variabler gestalten und habe daher die Reiter mit float:left aneinandergehängt. Hier die Ausgangsposition ohne aktiven Reiter: Test1
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). Dort wird der absolut mit z-index:5 positionierte Reiter nicht im Vordergrund angezeigt, sondern bleibt hinter den mit position:relative gesetzten Reitern. Dass es mit position zusammenhängt, sieht man daran, dass der absolut positionierte Reiter den oberen Rand der Inhaltsbox (ohne position) überlagert.
Kann man das irgendwie umgehen? 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.
Wie erwähnt, habe ich eine funktionierende Lösung, die komplett, mit position:absolute und fixen Größen arbeitet, muss aber jetzt einen Reiter einfügen ...
Ralf