在完成一个任务时,我需要在可滚动面板的顶部有一个固定位置的工具栏,然后我发现了CSS属性“opacity”的这种古怪行为。
这个简单的演示很容易理解,但总结一下: 如果你有两个DIV,一个是固定位置的,另一个在固定的DIV后面滚动,那么透明内容(opacity <1)在可滚动的DIV中显示在固定的DIV上方。 这里固定DIV的不透明度没有任何影响。
虽然如果我给固定的DIV分配比可滚动的DIV更大的z-index(请参见此演示),问题就会消失,但我仍然想知道为什么在这种情况下,不透明度属性的行为是反直觉的。
可以有人解释一下吗?
顺便说一下,这种行为在Chrome 35、FF 30和IE 10中保持一致。
将代码从jsfiddle复制到这里-因为这是惯例。 CSS
这个简单的演示很容易理解,但总结一下: 如果你有两个DIV,一个是固定位置的,另一个在固定的DIV后面滚动,那么透明内容(opacity <1)在可滚动的DIV中显示在固定的DIV上方。 这里固定DIV的不透明度没有任何影响。
虽然如果我给固定的DIV分配比可滚动的DIV更大的z-index(请参见此演示),问题就会消失,但我仍然想知道为什么在这种情况下,不透明度属性的行为是反直觉的。
可以有人解释一下吗?
顺便说一下,这种行为在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>