不透明度会影响堆叠顺序

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

启用叠加层时，叠加层前面会显示不透明度为0.4的.foggy元素。这种排列的堆叠顺序是从后到前：不透明度为1.0（默认值）的流入内容，绝对定位的叠加，然后是不透明度为0.4的元素。

但是，如果您明确将z-index: 1设置为.overlay（添加.tweak类），然后.overlay在堆叠顺序中被放置得更高。

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

<强>参考：

请参阅CSS2规范中的9.9.1 Specifying the stack level: the 'z-index' property 和CSS3颜色模块规范中的3.2. Transparency: the ‘opacity’ property。

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

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

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

What has bigger priority: opacity or z-index in browsers?

我在发布答案后发现了。

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

1 个答案:

不透明度会影响堆叠顺序