z-index und background funktionieren beim IE6 nicht

[Steffi]

Hallo Leute,

ich habe 2 Layer im <div>-Bereich und sie überlappen sich. Damit ich die Reihenfolge bestimmen kann, benutze ich z-index mittels CSS. Im Firefox klappt es wunderbar, nur der Internet Explorer 6 macht Probleme. Der höhere z-index-Wert sollte über dem niedrigen z-index-Wert sein, aber ist es leider nicht.

div#head div.picture {  
width: 387px;  
height: 231px;  
float: left;  
margin: 32px 0 0 22px;  
}  
div#head div.picture img {  
width: 387px;  
height: 231px;  
z-index: 1;  
position: absolute;  
}  
  
div#head div.picture div {  
background: url(../img/above_pic.gif) no-repeat;  
width: 387px;  
height: 231px;  
z-index: 500;  
position: absolute;  
}

In der HTML-Seite steht folgendes:

<div class="picture">  
    <div>test</div>  
    <img src="inc/img/beispiel.jpg" alt="Beispiel" />  
   </div>

Und siehe da... das Wort Test steht über dem Foto beispiel.jpg. Das Bild background above_pic.gif hingegen nicht, das Bild ist unter dem beispiel.jpg Foto. Warum?? Durch den z-index Wert müsste das Bild above_pic.gif über dem Foto beispiel.jpg sein?

Danke für eure Hilfe!

Lieben Gruß
Steffi