不透明度为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”显示在工具栏的“Test”之间，尽管它是不透明的红色。
http://jsfiddle.net/7gSyB/1/ - 将“Bla”切换为不透明，它将留在顶部元素的后面。

有什么想法为什么会发生这种情况，以及如何使其按预期工作（即使元素是透明的，也应该在浮动元素下方）？

- bardiir

---

至少在Chrome、Safari和Firefox中可用。 - bardiir

请提供您的HTML和CSS，以便我们能更好地了解。 - Sujay

不透明度在IE<9中无法工作。我不确定IE9是否可以。无论如何，你有什么疑问？ - Bhuvan Rikka

@Sujay：完成了，问题中有 jsfiddle 的示例。 - bardiir

@BhuvanRikka：这也影响到Chrome、Firefox和Safari，所以我不太明白你的观点。 - bardiir

Answer 1

根据CSS3-color文档，任何不透明度小于1的元素都必须创建一个新的堆叠上下文。如果一个不透明度小于1的元素没有定位，实现必须在其父级堆叠上下文中绘制它所创建的层，绘制顺序与定位元素的z-index: 0和opacity: 1属性相同。

因此，你的#button { opacity:.5 }元素将获得一个带有z-index:0的新堆叠上下文，而你的绝对定位的#toolbar也将具有（默认的）z-index:0。因此，在页面从上到下的顺序中，按钮会被绘制在工具栏上方，因为按钮在工具栏元素之后。

解决方法只需为#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;
}​

- andyb