z-index not working as expected (Chrome and Opera)

Question

I have a div with class "opaque" and another with class "product-info", which are both on the same level.

The code is as follows:

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

Note that product-info is set to z-index 2 and opaque has z-index 1. Therefore product-info should be displayed over opaque so should not be faded. However the image within product-info (and text) is faded. This happens in both Chrome and Opera, therefore I expect this is what should be happening since they are not IE!

There are lots of bits of HTML code as shown above, each nested in lis which are set to float left with width of 33%. When the page is fully loaded ($(window).load()) I use jQuery to detect the maximum height of all the products and apply that height to all the rest. I have tried removing all the jQuery in case this is affecting the z-index, but I get the same result only with an untidy look and feel.

I have tried using Google Chromes Inspect Element tool and the elements in question are showing the correct characteristics.

Can anyone see what I am doing wrong here? I have been trying to solve this for a couple of days now and would like to find out what is going on.

Thank you.

Regards,

Richard

Full code as requested:

I think this is all that is required. I will create a page with just this code in a few minutes, to see if it reproduces the problem.

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

Answer 1

I have found the solution!! I simply added position: relative; to .product-info. I can't believe I was so stupid as to not try that in the first place! Thanks for both your efforts @Thomas & Lazycommit. @Lazycommit your link came in handy - it confirmed that my code should have been working if it weren't for missing out the position: relative;. I noticed that they had set the position attribute for all of the divs in the example - this is what made me try it.

Answer 2

This is a big theme. U may look this page from Firefox developers for better understanding browsers stacking.