4

在对元素使用透明度和叠加层的过程中，我们遇到了一个我们无法完全解决的 CSS 奇怪问题。

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

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

其他相关的 CSS 是覆盖的 Z-Index 为 999，并且与按钮没有祖先联系。

4

1 回答 1

7

不透明度影响堆叠顺序

考虑以下 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 规范
和3.2 中的“z-index”属性。透明度： CSS3 颜色模块规范中的“不透明度”属性。

从技术上讲，向元素添加不透明度值（1.0 除外）会创建一个 z-index 为 0 的新堆叠上下文，这也是定位元素所发生的情况。

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

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

什么更重要：浏览器中的不透明度或 z-index？

我发布答案后发现的。

于 2013-06-07T12:26:07.683 回答