CSS属性"不透明"的古怪行为

Question

在处理任务时,我必须在可滚动面板的顶部有一个固定定位的工具栏,我偶然发现了CSS属性"opacity"的这种古怪(？)行为.

这个简单的小提琴是自我解释的,但总结一下:如果你有两个DIV,一个固定位置,另一个滚动后面(？)固定一个,那么可滚动div中的半透明内容(不透明度<1)显示出来固定的div.这里固定div的不透明度无关紧要.

如果我给固定div分配一个大于可滚动div的z-index(参见这个小提琴),问题就会消失,我仍然很想知道为什么opacity属性在这种情况下以反直觉方式运行.

有人可以解释一下吗？

顺便说一下,Chrome 35,FF 30和IE 10的行为是一致的.

在这里复制来自jsfiddle的代码 - 因为它是常态.

CSS

.fixedOpaqueDiv {
    position: fixed;
    background-color: #ABABAB;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 20px;
    color: #DDDDDD;
    padding-top: 5px;
    opacity: 1;
}
.scrollingDiv {
    padding-top: 140px;
    text-align: center;
    color: blue;
    font-weight: bold;
}

.opaque {
    opacity: 1;
}

.translucent {
    opacity: 0.5;
}

HTML

<div style="height: 300px; overflow: auto;">
    <div class="fixedOpaqueDiv">I am a div with fixed position,
        <BR>with same z-index as the div below.
        <BR>I am supposed to be Opaque, but
        <BR>apparently I am opaque ONLY to the opaque divs below,
        <BR>and not to the translucent ones</div>
    <div class="scrollingDiv">
        <div class="translucent" style="color: red; padding: 5px;">^^^^^^^^ Scroll up ^^^^^^^^</div>
        <div class="opaque">Opaque 1</div>
        <div class="translucent">Translucent 1</div>
        <div class="opaque">Opaque 2</div>
        <div class="translucent">Translucent 2</div>
        <div class="opaque">Opaque 3</div>
        <div class="translucent">Translucent 3</div>
        <div class="opaque">Opaque 4</div>
        <div class="translucent">Translucent 4</div>
        <div class="opaque">Opaque 5</div>
        <div class="translucent">Translucent 5</div>
        <div class="opaque">Opaque 6</div>
        <div class="translucent">Translucent 6</div>
        <div class="opaque">Opaque 7</div>
        <div class="translucent">Translucent 7</div>
        <div class="opaque">Opaque 8</div>
        <div class="translucent">Translucent 8</div>
    </div>
</div>

Answer 1

这与opacity小于1 的元素创建堆叠上下文的事实有关.未建立堆叠上下文的元素将被固定位置元素按预期模糊,但建立堆叠上下文的半透明元素将在前面绘制,因为它们出现在源中的固定位置元素之后.

设置原因z-index是因为您使固定位置元素的堆栈级别大于可滚动元素的内容的堆栈级别.

CSS2.1规范的第9.9节总结了元素堆叠的确切顺序.列表中的最后两项与此方案相关:

在每个堆叠上下文中,以下层按从前到后的顺序绘制:

1. 形成堆叠背景的元素的背景和边界.
2. 子堆叠上下文与负堆栈级别(最负面的).
3. 流入的,非内联级别,非定位后代.
4. 未定位的花车.
5. 流入的,内联级的,未定位的后代,包括内联表和内联块.
6. 堆栈级别为0的子堆栈上下文和堆栈级别为0的已定位后代.
7. 堆叠具有正堆栈级别的子堆栈(最少积极的第一个).

在#6中,"子堆叠上下文"指的是半透明元素,而定位的后代是固定元素.一旦你设置z-index了固定元素,它就会落在#7之下,这可以确保它出现在半透明内容上.