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 之上，以免褪色。然而，产品信息（和文本）中的图像已褪色。这种情况在 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 你的链接派上了用场 - 它确认了我的代码如果不是错过了 position:relative; 应该可以正常工作。我注意到他们已经为示例中的所有 div 设置了位置属性 - 这就是让我尝试的原因。

Answer 2

这是一个大主题。您可以查看 Firefox 开发人员的此页面，以更好地了解浏览器堆栈。

Answer 3

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

Answer 4

我知道这已经很旧了，但是您可以使用 rgba() 代替 opacity 并删除“product-info”div。这会产生与您想要的相同的效果，因为 rgba() 使用不同的方法来导致透明，但不会使子元素也变得透明。使实现您想要的效果变得更加容易。

Answer 5

如果有外部div设置position:fixed;并且您需要position:fixed;，则添加与内部div相同的z-index。
例如：

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

会工作得很好。

但是，如果像下面这样的通知类，它不会在 chrome 中正确设置 z-index 。

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