Problem mit Z-Index

[SE]

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;
}