z-index不能正常工作（Chrome和Opera） [英] z-index not working as expected (Chrome and Opera)

问题描述

我有一个div，类opaque和另一个类product-info，它们都在同一级别。

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

代码如下：

<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 -index 1.因此，产品信息应该显示在不透明，所以不应该褪色。然而，产品信息（和文本）中的图像是褪色的。这发生在Chrome和Opera，因此我希望这是应该发生，因为他们不是IE！

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!

有很多的HTML代码如上所示，每个嵌套在lis中，设置为向左浮动宽度为33％。当页面完全加载时（ $（window）.load（））我使用jQuery来检测所有产品的最大高度，并将其应用到所有其余的高度。我已经尝试删除所有的jQuery，如果这是影响z-index，但我得到相同的结果只有一个不整洁的外观和感觉。

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.

我试过使用Google Chromes检查元素工具和相关元素显示正确的特征。

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.

谢谢。

尊敬的，

Richard

所要求的完整代码：

我认为这是所有必需的。我将在几分钟后创建一个只包含此代码的页面，以查看是否重现了此问题。

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

推荐答案

！我只是添加 position：relative; 到 .product-info 。我不能相信我是那么蠢，因为不尝试，在第一个地方！感谢您的努力@Thomas& Lazycommit。 @Lazycommit你的链接派上用场 - 它确认我的代码应该是工作，如果它不是错过了 position：relative; 。我注意到他们已经为示例中的所有div设置了position属性 - 这是什么让我试试。

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.

这篇关于z-index不能正常工作（Chrome和Opera）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！