z-index无法按预期工作(Chrome和Opera)

Question

我有一个带有"opaque"类的div和另一个带有"product-info"类的div,它们都处于同一级别.

代码如下:

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

请注意,product-info设置为z-index 2,opaque设置为z-index 1.因此,product-info应显示在opaque上,因此不应该褪色.但是,product-info(和text)中的图像会变淡.这种情况发生在Chrome和Opera中,因此我希望这是应该发生的事情,因为它们不是IE!

如上所示,有许多HTML代码,每个嵌套在lis中,设置为向左浮动,宽度为33%.当页面完全加载($(window).load())时,我使用jQuery来检测所有产品的最大高度,并将该高度应用于所有其他产品.我已经尝试删除所有的jQuery,以防这会影响z-index,但我得到的结果只有不整齐的外观和感觉.

我尝试过使用Google Chromes Inspect Element工具,所讨论的元素正在显示正确的特征.

谁能看到我在这里做错了什么？我一直试图解决这个问题几天,并想知道发生了什么.

谢谢.

问候,

理查德

完整代码请求:

我认为这就是所需要的.我将在几分钟内创建一个只包含此代码的页面,以查看它是否重现了该问题.

<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

我找到了解决方案!! 我只是添加position: relative;到.product-info.我不敢相信我是如此愚蠢到不首先尝试!感谢您的努力@Thomas&Lazycommit.@Lazycommit您的链接派上用场 - 它确认我的代码应该一直在工作,如果它不是为了错过了position: relative;.我注意到他们已经为示例中的所有div设置了position属性 - 这就是让我尝试它的原因.