不透明度50%元素通过不透明元素显示

Question

我有一个CKEdit的问题.工具栏显示在工具栏顶部的元素,就像您在此屏幕截图中看到的那样:

该按钮显示为灰色opacity: 0.5,如果删除该元素,则该元素将position: fixed正确放置在工具栏下方:

受影响的浏览器:
Chrome,Safari,Firefox,Internet Explorer 9

不可测试的浏览器:
Internet Explorer 8(position: fixed带有页面的滚动,因此问题不会显示)

我还没有测试过其他浏览器,但它似乎是一个有点渲染引擎独立的问题.

浮动(固定)元素本身是不透明的,它不是工具栏的子元素.但是当透明时,透明按钮浮在其上面.但是当不透明度设置为1时,它们会保留在其下面.因此看起来不透明度会影响元素的z层.

JSFiddle:
http://jsfiddle.net/7gSyB/ - 你可以通过工具栏的测试看到按钮的"Bla",尽管它是不透明的红色.
http://jsfiddle.net/7gSyB/1/ - 将"Bla"切换为不透明,并且它位于顶部元素后面.

任何想法为什么会发生这种情况以及如何让它按预期工作(即使透明,透明元素仍然在浮动元素下面)？

Answer 1

从CSS3-color文档:

实现必须为不透明度小于1的任何元素创建新的堆叠上下文.如果未定位不透明度小于1的元素,则实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的图层.使用,如果它是与定位元件z-index: 0和 opacity: 1

因此,您的#button { opacity:.5 }元素将获得一个新的堆叠上下文,z-index:0并且您的绝对定位#toolbar也将具有(默认值)z-index:0.因此,DOM中元素的顺序将导致浏览器在工具栏的顶部绘制按钮,因为按钮实际上位于页面顺序的顶部到底部的工具栏元素之后.

修复只是为了z-index向#toolbar 添加一个更高的(比0):

HTML

<div id="toolbar">Test Test Test</div>
<div id="button">Blah</div>

CSS

#toolbar {
  background: red;
  position: fixed;
  z-index:1; /* if this is 0 then the button will be painted over the toolbar */
}

#button {
  opacity: 0.5;
  background-color:#000;
  height:42px;
  width:84px;
  color:#fff;
  font-size:42px;
}?