Possible Opacity Z-Index Bug

Question

I just ran into a really wierd issue when setting opacity on a web page. The element with opacity obscures other elements on the page.This happens in Safari, Chrome and Firefox. Opacity is ignored in IE7 & 8. Not tested on IE9.

Fiddle

<style>
   #content { opacity: .92; background: #dfd; height: 300px;}
   #sidebar { width: 200px; float: right; background: #fdd; height: 200px; }
</style>
<div id="sidebar"></div>
<div id="content"></div>

Removing opacity restores the expected behavior. Another possible fix is to use rgba background values instead of opacity.

Has anyone else encountered this? If so, how did you fix it?

Answer 1

The opacity you're setting on #content is creating a new stacking context, and stacking contexts affect z-indexes. Since you didn't specify z-indexes manually, they're being auto assigned, and #content has a higher value than #sidebar because it comes later in the markup.

A simple CSS solution: just add position: relative; z-index: 2 to #sidebar (to establish yet another stacking context). On your real code, you may need to add a z-index to #content too, if you have more elements under #wrapper:

#sidebar { position: relative; z-index: 2; /* etc */ }

http://jsfiddle.net/V4MrH/3/

Answer 2

This issue is already known. https://www.google.com/#q=opacity%20change%20z-index

You should use rgba background, which is also a widely supported property.