Css 透明元素显示在不透明的前景元素上

在对元素使用透明度和覆盖的过程中，我们遇到了一个我们无法解决的CSS奇怪之处

如屏幕截图所示，有两个应用了0.4不透明度的img元素。然后我们在上面打开一个覆盖图，它们就出现在这张图片的前面。当“不透明度”设置为1.0时，它们不再显示在前面

其他相关CSS是覆盖的Z索引为999，与按钮没有祖先关系。

不透明度影响堆叠顺序 考虑以下HTML代码段：

<div class="wrapper tweak">
    <div class="overlay"> 
        <p>The Overlay Panel</p>
    </div>
    <div class="content">
        <p>The main Content panel with a motif: 
           <b>&hearts;</b> <b class="foggy">&spades;</b></p>
    </div>
</div>

基本上，我有一个包含两个子div的包装器，

.overlay

和

.content

。请注意，覆盖在代码（DOM）中的内容之前。如果是在之后，你一开始就不会看到这个问题

内容有两个粗体元素，具有两个不同的不透明度值

请参见演示小提琴中的基本线条：

启用覆盖时，不透明度为0.4的

.foggy

元素将显示在覆盖前面。此排列的堆叠顺序是从后到前：不透明度为1.0（默认值）的流入内容、绝对定位覆盖，然后是不透明度为0.4的元素

但是，如果将

z-index:1

显式设置为

.overlay

（添加

.tweak

类）， 然后，

.overlay

在堆叠顺序中放置得更高

还有其他方法可以调整z索引值以获得相同的效果，但这可能是最简单的方法

参考资料：

参见CSS2规范中的
在CSS3颜色模块规范中

从技术上讲，向元素添加不透明度值（1.0除外）将创建z索引为0的新堆叠上下文，这也是定位元素的情况

但是，当两个元素具有相同的z索引时，它们将按照它们在DOM中出现的顺序（树顺序）进行绘制。在本例中，覆盖层首先绘制，然后是不透明度为0.4的粗体元素，这就是它出现在覆盖层前面的原因

还有一个较早的问题涉及同样的问题：

---

这是我在发布我的答案后发现的。

z-index一路发布……任何图像上都没有z-index。不透明度为1.0的其他两个没有显示出来，如图所示。您能在这里发布相关的html吗？这个问题取决于各种元素的堆叠顺序，我们确实需要查看一些代码，否则我们无法为您提供太多帮助。好问题，所以发布更多信息是值得的。可能相关的问题是：不透明度值是否影响堆叠（z索引）顺序？回答好，就是这样！感谢我没有意识到不透明度和z-index之间有这种关系我知道这是非常古老的，但是通过将modal div移到html文件的底部修复了上一段中的问题。

.wrapper {
    position: relative;
    outline: 1px solid blue;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    border: 1px dotted blue;
    width: 400px;
}

.content p b {
    background-color: black;
    color: white;
    padding: 0 10px;
    opacity: 1.0; /* default value */
}
.content p b.foggy {
    opacity: 0.4;
}

.tweak .overlay {
    z-index: 1;
}