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.

Answer 3

尝试将应该在后面的项目的z-index设置为负数，例如-1 :)

Answer 4

I know this is old, but you can use rgba() instead of opacity and get rid of the "product-info" div. This does the same effect you want since rgba() uses a different method of causing transparency that does not make the children elements go transparent as well. Makes doing the effect you wanted much easier.

Answer 5

if there is outer div to set position: fixed; and you need position: fixed; there add z-index same as inner div. ex:

.notifications {
    position: fixed;
    width: auto;
    max-width: 70%;  
    z-index: 9999;
}

.notifications > div {
    position: relative;
    z-index: 9999;
    /*  margin: 5px 0px;*/ /*default value*/
    margin: 65px 10px;
    display: inline-block;
}

will work fine.

But if notifications class like below it does not set z-index in chrome correctly.

.notifications {
    width: auto;
    max-width: 70%;  
    z-index: 9999;
}