html - 不透明度 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: 0and 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;
}​