Possible Opacity Z-Index Bug
css, opacity
Solution
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.
Problem
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?