html - 不透明度 50% 元素透过不透明元素显示

Question

我遇到了 CKEdit 的问题。工具栏通过工具栏顶部的元素显示，如您在此屏幕截图中所见:

按钮通过 opacity: 0.5 变灰，如果移除该按钮，元素将正确放置在 position: fixed 工具栏下方:

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

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

我还没有测试过其他浏览器，但这似乎是一个独立于渲染引擎的问题。

float (固定)元素本身是不透明的，它不是工具栏的子元素。但是透明按钮在透明时漂浮在它上面。但是当不透明度设置为 1 时，它们会留在它下面。所以看起来不透明度正在影响元素的 z 层。

JSFiddle:
http://jsfiddle.net/7gSyB/ - 你可以通过工具栏的测试看到按钮的“Bla”，尽管它是不透明的红色。
http://jsfiddle.net/7gSyB/1/ - 将“Bla”切换为不透明，并保留在顶部元素后面。

知道为什么会发生这种情况以及如何让它按预期工作(透明元素即使透明也保持在 float 元素下方)？

Answer 1

来自CSS3-color文档:

implementations must create a new stacking context for any elementwith opacity less than 1. If an element with opacity less than 1 isnot positioned, implementations must paint the layer it creates,within its parent stacking context, at the same stacking order thatwould be used if it were a positioned element with z-index: 0 andopacity: 1

所以你的 #button { opacity:.5 } 元素得到一个新的堆栈上下文 z-index:0 和你的绝对定位 #toolbar 也将具有(默认)z-index:0。因此，DOM 中元素的顺序将导致浏览器在工具栏顶部绘制按钮，因为按页面顺序从上到下，按钮确实位于工具栏元素之后。

修复只是在 #toolbar 添加一个更高(大于 0)的 z-index 例如:

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