z-index funktioniert nicht wie erwartet (Chrome und Opera)

Question

Ich habe ein div mit der Klasse "opaque" und ein anderes mit der Klasse "product-info", die beide auf der gleichen Ebene liegen.

Der Code lautet wie folgt:

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

Beachten Sie, dass product-info auf z-index 2 eingestellt ist und opaque den z-index 1 hat. Daher sollte product-info über opaque angezeigt werden und nicht verblasst sein. Das Bild innerhalb der Produktinformation (und der Text) werden jedoch ausgeblendet. Dies geschieht sowohl in Chrome als auch in Opera, daher gehe ich davon aus, dass dies der Fall sein sollte, da es sich nicht um IE handelt!

Es gibt viele Bits von HTML-Code, wie oben gezeigt, jeder in lis verschachtelt, die auf float links mit einer Breite von 33% eingestellt sind. Wenn die Seite vollständig geladen ist ( $(window).load() ) Ich verwende jQuery, um die maximale Höhe aller Produkte zu ermitteln und diese Höhe auf alle anderen Produkte anzuwenden. Ich habe versucht, alle jQuery zu entfernen, für den Fall, dass dies den Z-Index beeinträchtigt, aber ich erhalte das gleiche Ergebnis nur mit einem unordentlichen Look and Feel.

Ich habe versucht, Google Chromes Inspect Element Tool zu verwenden, und die fraglichen Elemente zeigen die richtigen Merkmale.

Kann mir jemand sagen, was ich hier falsch mache? Ich versuche schon seit ein paar Tagen, dieses Problem zu lösen und würde gerne herausfinden, was los ist.

Ich danke Ihnen.

Saludos,

Richard

Vollständiger Code wie gewünscht:

Ich denke, das ist alles, was erforderlich ist. Ich werde in ein paar Minuten eine Seite mit nur diesem Code erstellen, um zu sehen, ob das Problem dadurch reproduziert wird.

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