z-index ne fonctionne pas comme prévu (Chrome et Opera)

J'ai un div avec la classe "opaque" et un autre avec la classe "produit-info", qui sont tous les deux sur le même niveau.

Le code est comme suit:

<div class="opaque"></div>
<div class="product-info">
    <img class="product-image" src="/Images/D3.jpg" />
    fsdfdsfsdfs
</div>

.opaque 
{
    background-color: White;
-moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
}

.product-info 
{
padding: 5px;
text-align: center;
z-index: 2;
}

Noter que produit-info est mis à z-index 2 et opaque a z-index 1. Donc produit-information doit être affichée plus opaque ne devrait donc pas être fanée. Cependant l'image à l'intérieur du produit-info (et le texte) est fanée. Ce qui se passe dans Chrome et Opera, donc je m'attends c'est ce qui devrait arriver, car ils ne sont pas IE!

Il y a beaucoup de morceaux de code HTML comme indiqué ci-dessus, chaque imbriquée dans la lis qui sont mis à flotter à gauche avec une largeur de 33%. Lorsque la page est complètement chargée ($(window).load()) j'utilise jQuery pour détecter la hauteur maximale de tous les produits et appliquer la hauteur de tout le reste. J'ai essayé de supprimer tous les jQuery dans le cas où cela affecte le z-index, mais j'obtiens le même résultat qu'avec un désordre regarder et se sentir.

J'ai essayé d'utiliser Google Chromes Inspecter l'Élément de l'outil et les éléments en question sont montrant les caractéristiques correctes.

N'importe qui peut voir ce que je fais de mal ici? J'ai été d'essayer de résoudre cela pour un couple de jours maintenant et j'aimerais savoir ce qui se passe.

Merci.

Ce qui concerne,

Richard

Code complet sur demande:

Je pense que c'est tout ce qui est nécessaire. Je vais créer une page avec juste ce code en quelques minutes, pour voir si elle reproduit le problème.

<div id="BodyTag_ContentPanel">
    <div class="overlay-background"></div>
    <div class="scroll-pane">
        <div>
            <ul class="product-list">
                <li class="product">
                    <div class="spacer">
                        <div class="opaque"></div>
                        <div class="product-info">
                            <img class="product-image" src="/Images/D3.jpg" />
                            <div class="enlarge">
                                <div class="image-enlargement">
                                    <span class="close"><img src="/Images/close.jpg" /></span>
                                    <div class="enlargement">
                                        <div class="image-container"><img src="/Images/D3.jpg" /></div>
                                        <div class="product-code"><span class="text-container">D3</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="product-code">D3</div>
                        <div class="clear"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

.product-list 
{
list-style: none;
padding: 0;
width: 100%;
}
.product 
{
width: 33%;
height: 25%;
float: left;
position: relative;
}
.product .spacer 
{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: 10px;
padding: 5px;
border: 4px solid #C47F50;
position: relative;
}
.product .opaque 
{
background-color: White;
-moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
}
.product .product-info 
{
padding: 5px;
text-align: center;
z-index: 2;
}
.product .product-info .product-image 
{
max-width: 200px;
max-height: 200px;
min-width: 150px;
min-height: 150px;
z-index: 2;
}
.product .product-code 
{
position: absolute;
bottom: -15px;
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: White;
text-align: center;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 4px solid #C47F50;
line-height: 20px;
z-index: 2;
}
.product .image-enlargement 
{
position: fixed;
display: none;
padding: 5px;
background-color: White;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 4px solid #C47F50;
z-index: 103;
}
.product .enlarge
{
float: right;
}