Html z-index 未按预期工作（Chrome 和 Opera）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4506644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
z-index not working as expected (Chrome and Opera)
提问by ClarkeyBoy
I have a div with class "opaque" and another with class "product-info", which are both on the same level.
我有一个类为“不透明”的 div 和另一个类为“产品信息”的 div，它们都在同一级别。
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!
请注意，product-info 设置为 z-index 2，而 opaque 的 z-index 为 1。因此 product-info 应显示在 opaque 之上，因此不应褪色。但是，产品信息（和文本）中的图像已褪色。这发生在 Chrome 和 Opera 中，因此我希望这是应该发生的事情，因为它们不是 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.
如上所示，有很多 HTML 代码，每个都嵌套在 lis 中，设置为向左浮动，宽度为 33%。当页面完全加载 ( $(window).load()) 时，我使用 jQuery 检测所有产品的最大高度并将该高度应用于所有其余产品。我已经尝试删除所有 jQuery，以防这影响 z-index，但我只能在不整洁的外观和感觉下得到相同的结果。
I have tried using Google Chromes Inspect Element tool and the elements in question are showing the correct characteristics.
我曾尝试使用 Google Chromes Inspect Element 工具，并且有问题的元素显示出正确的特征。
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;
}
回答by ClarkeyBoy
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.
我找到了解决办法！！我只是添加position: relative;到.product-info. 我简直不敢相信我太愚蠢了，一开始就没有尝试！感谢@Thomas 和 Lazycommit 的努力。@Lazycommit 你的链接派上用场了——它确认我的代码应该可以正常工作，如果不是因为错过了position: relative;. 我注意到他们已经为示例中的所有 div 设置了位置属性 - 这就是让我尝试的原因。
回答by lazycommit
回答by Thomas Havlik
Try setting the z-index of the item that is supposed to be in the back to a negative number, like -1 :)
尝试将应该在后面的项目的 z-index 设置为负数，例如 -1 :)
回答by David Mann
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.
我知道这很旧，但是您可以使用 rgba() 而不是 opacity 并摆脱“product-info”div。这与您想要的效果相同，因为 rgba() 使用不同的方法来产生透明度，而不会使子元素也变得透明。使你想要的效果更容易。
回答by eraW
if there is outer div to set position: fixed;and you need position: fixed;there add z-indexsame as inner div.
ex:
如果要设置外部 divposition: fixed;并且您需要position: fixed;添加z-index与内部 div 相同的内容。前任：
.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-indexin chrome correctly.
但是，如果像下面这样的通知类没有z-index在 chrome 中正确设置。
.notifications {
width: auto;
max-width: 70%;
z-index: 9999;
}
