不透明度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也会（默认）z-index。因此，DOM中元素的顺序将导致浏览器在工具栏的顶部绘制按钮，因为按钮实际上位于页面顺序的顶部到底部的工具栏元素之后。

修复只是为了向#toolbar添加更高（0）<div id="toolbar">Test Test Test</div> <div id="button">Blah</div> ，例如：

HTML

#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;
}​

CSS

{{1}}