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

我对CKEdit有意见。工具栏通过工具栏顶部的一个元素显示，如此屏幕截图所示：

按钮通过

opacity:0.5

变灰，如果移除该按钮，则元素将正确放置在

位置：固定的
工具栏下方：


受影响的浏览器：

Chrome、Safari、Firefox、Internet Explorer 9

不可测试的浏览器：

Internet Explorer 8（
位置：固定
与页面一起滚动，因此不会显示问题）

我还没有测试过其他浏览器，但这似乎是一个与渲染引擎无关的问题

浮动（固定）元素本身是不透明的，它不是工具栏的子元素。但当透明时，透明按钮会浮在其上。但当“不透明度”设置为1时，它们将保持在其下方。所以看起来不透明度正在影响元素的z层

JSFiddle:

-您可以通过工具栏的测试看到按钮的“Bla”，尽管它是不透明的红色。

-将“Bla”切换为不透明，并保持在顶部元素后面

了解发生这种情况的原因以及如何使其按预期工作（透明元素保持在浮动元素下方，即使透明）？来自文档：

实现必须为任何元素创建新的堆栈上下文
不透明度小于1。如果不透明度小于1的元素为
未定位，实现必须绘制它创建的层，
在其父堆叠上下文中，以与
如果它是z索引为0的定位元素，则将使用
不透明度：1

因此，您的
#按钮{opacity:.5}
元素将获得一个带有
z-index:0
的新堆叠上下文，并且您绝对定位的
#工具栏也将具有（默认）
z-index:0
。因此，DOM中元素的顺序将导致浏览器将按钮绘制在工具栏的顶部，因为按钮按从上到下的页面顺序紧跟在工具栏元素之后

修复方法只是在#工具栏中添加一个高于0的z索引
，例如：

HTML
至少在Chrome、Safari和Firefox中，请提供您的HTML和CSS，以便我们可以获得更好的想法，因为容量不适用于IE@Sujay：完成，问题中有JSFIDLE示例。@BhuvanRikka：这也会影响Chrome、Firefox和Safari，所以我不太明白你的意思。
<div id="toolbar">Test Test Test</div>
<div id="button">Blah</div>

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