SE: Problem mit Z-Index

Hallo allerseits,

ich habe hier ein Problem mit meinem CSS.

Auf einer Seite soll ein Bild angezeigt werden. Sobald der Cursor über das Bild bewegt wird, sollen weitere Bilder (absolut positioniert) angezeigt werden. Sobald der Cursor über diese bewegt wird, soll ein Span angezeigt werden.

Das funktioniert im Grunde auch. Mein Problem ist, dass der Span (Klasse "usermarker_text") immer UNTER dem Image (Klasse "usermarker") angezeigt wird. Habe schon diverse Z-Index Einstellungen ausprobiert, bekomme es aber nicht richtig zum laufen.

Sieht vielleicht jemand einen Fehler, oder hat eine Idee, woran es liegen könnte?

Meine HTML Datei ist folgendermaßen aufgebaut:

<div class="picture_container">
    <img class="picture">
    <a class="usermarker_link">
        <img class="usermarker">
        <span class="usermarker_text">
    </a>
</div>

Und hier der passende CSS:

div.picture_container:hover a{
 display: inline;
 position: absolute;
 text-decoration: none;
}

img.picture{
 position: absolute;
 top: 0px;
 left: 0px;

}

a.usermarker_link {
 position: absolute;
 display: none;
 z-index: 998;
}

a.usermarker_link:hover span{
 display: inline;
 z-index: 999;
}

img.usermarker{
 position: absolute;
 top:0px;
 left:0px;
 z-index: 998;
}

span.usermarker_text{
 display: none;
 background-color: #445566;
 color: #ffffff;
 border: #8899AA solid thin;
 FONT-SIZE: 8pt;
 FONT-FAMILY: Verdana;
 padding: 5px;
 width: 100px;
 text-align: left;
 font-weight: normal;
 font-style: normal;
 text-decoration: none;
 text-align: justify;
 line-height:1.2em;
 white-space:normal;
}

  1. @@SE:

    http://forum.de.selfhtml.org/archiv/2008/1/t165932/#m1081881

    Live long and prosper,
    Gunnar

    --
    Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
    1. Ja, daran lag es, vielen vielen Dank :)

      Sobald im CSS folgender Wert gesetzt ist, funktioniert es einwandfrei:
      span.usermarker_text{
          position: absolute;
      }

  2. Habe soeben allerdings bemerkt, dass das gesamte Konstrukt unter dem Internet Explorer 6 komplett den Dienst verweigert.

    Hat da eventuell noch jemand eine Idee, woran es hakt?

    1. Hi,

      Habe soeben allerdings bemerkt, dass das gesamte Konstrukt unter dem Internet Explorer 6 komplett den Dienst verweigert.

      Hat da eventuell noch jemand eine Idee, woran es hakt?

      Hoechstvermutlich an der absolut uraltbekannten Tatsache, dass der IE <= 6 :hover ausschlieslich auf A-Elementen mit href-Attribut interpretieren mag.

      MfG ChrisB

      --
      „This is the author's opinion, not necessarily that of Starbucks.“