Question

在处理任务时，我必须在可滚动面板的顶部有一个固定定位的工具栏，我偶然发现了CSS属性＆＃34; opacity＆＃34;的这种古怪（？）行为。

这simplistic fiddle是自我解释的，但总结一下：如果你有两个DIV，一个固定定位，另一个滚动后面（？）固定的那个，那么可滚动div中的半透明内容（不透明度＆lt; 1）显示在固定div上。固定div的不透明度在这里没有任何意义。

如果我给固定div分配一个大于可滚动div的z-index（参见this fiddle），问题就会消失，我仍然很想知道为什么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

这与an element with opacity less than 1 creates a stacking context的事实有关。没有建立堆叠上下文的元素将被固定位置元素按预期模糊，但确实建立堆叠上下文的半透明元素将被绘制在前面，因为它们出现在源中的固定位置元素之后。 / p>

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

Section 9.9 of the CSS2.1 spec总结了元素堆叠的确切顺序。列表中的最后两项与此方案相关：

在每个堆叠上下文中，以下按顺序绘制以下图层：


构成堆叠背景的元素的背景和边框。

子堆叠上下文具有负堆栈级别（最多为负数）。

流入的，非内联级别，未定位的后代。

未定位的花车。

in-flow，内联级别，非定位后代，包括内联表和内联块。

堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。

堆叠具有正堆叠级别的子级上下文（最少积极的第一个）。

在＃6，＆＃34;儿童堆叠环境＆＃34;指半透明元素，定位后代是固定元素。在固定元素上设置z-index后，它会落在＃7下，这样可以确保它出现在半透明内容上。

CSS属性的古怪行为＆＃34;不透明度＆＃34;

1 个答案: