Opacity 50% element showing through opaque elements

Question

I've got an issue with the CKEdit. The toolbar is showing through an element that is on top of the toolbar like you can see in this screenshot:

The button is greyed-out via opacity: 0.5, if that is removed the element is placed underneath the position: fixed toolbar correctly:

Affected browsers:
Chrome, Safari, Firefox, Internet Explorer 9

Non testable browsers:
Internet Explorer 8 (the position: fixed scrolls with the page and therefore the issue won't show)

I haven't tested other browsers yet but it seems to be an issue that is somewhat rendering engine independent.

The floating (fixed) element itself is opaque, it's not a child of the toolbar. But the transparent buttons are floating atop of it when transparent. But they stay underneath it when opacity is set to 1. So it looks like opacity is affecting the z-layer of elements.

JSFiddle:
http://jsfiddle.net/7gSyB/ - you can see the "Bla" of the button showing through the Test of the Toolbar, despite it beeing opaque red.
http://jsfiddle.net/7gSyB/1/ - switched the "Bla" to opaque and it stays behind the top element.

Any ideas why this is happening and how to get it working as expected (transparent element stays beneath floating element even if transparent)?

Answer 1

From the CSS3-color documentation:

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

So your #button { opacity:.5 } element gets a new stacking context with z-index:0 and your absolutely positioned #toolbar will also have (the default) z-index:0. The order of the elements in the DOM will therefore result in the browser painting the button over the top of the toolbar, since the button is literally after the toolbar elements in top to bottom of the page order.

The fix is just to add a higher (than 0) z-index to the #toolbar for example:

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