透明度出现在不透明前景元素上的元素

Question

在对元素和叠加层使用一些透明度的过程中,我们遇到了一个我们无法解决的CSS怪异问题.

http://i.imgur.com/h5Lzvde.png

如屏幕截图所示,有两个img元素应用了0.4不透明度.然后我们在这些上方打开一个叠加层,它们出现在此前面.当不透明度设置为1.0时,它们不再显示在前面.

其他相关的CSS是叠加层的Z-Index为999,并且没有与按钮的祖先连接.

Answer 1

不透明度会影响堆叠顺序

请考虑以下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>

和以下CSS:

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

基本上,我有两个孩子div的包装,.overlay和.content.请注意,叠加层位于代码(DOM)中的内容之前.如果它之后,你就不会在第一时间看到这个问题.

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

看到演示小提琴的基本路线是:http://jsfiddle.net/audetwebdesign/DxQZv/

启用叠加层时,.foggy不透明度为0.4 的元素将出现在叠加层的前面.这种排列的堆叠顺序是从后到前:不透明度为1.0(默认值)的流入内容,绝对定位的叠加,然后是不透明度为0.4的元素.

但是,如果您明确设置z-index: 1为.overlay(添加.tweak类),则会.overlay在堆叠顺序中放置得更高.

有调整的z-index值来获得同样的效果的其他方式,但是这可能是最简单的.

参考:

请参见9.9.1指定堆栈级别: CSS2规范中的"z-index"属性
和3.2.透明度: CSS3颜色模块规范中的"不透明度"属性.

从技术上讲,增加不透明度值(大于1.0除外)的元素创建为0 z索引,其还设有一个定位元件会发生什么新的堆叠内容.

但是,当两个元素具有相同的z-index时,它们将按照它们在DOM(树顺序)中出现的顺序进行绘制.在这种情况下,首先绘制叠加层,然后绘制不透明度为0.4的粗体元素,这就是它出现在叠加层前面的原因.

还有一个早期问题涉及同一问题:

什么有更高的优先级:浏览器中的不透明度或z-index？

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