title: Possible Opacity Z-Index Bug
body: <p>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 &amp; 8. Not tested on IE9. </p>
  
  <p><a href="http://jsfiddle.net/V4MrH/" rel="nofollow">Fiddle</a></p>
  
  <pre><code>&lt;style&gt;
     #content { opacity: .92; background: #dfd; height: 300px;}
     #sidebar { width: 200px; float: right; background: #fdd; height: 200px; }
  &lt;/style&gt;
  &lt;div id="sidebar"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Removing opacity restores the expected behavior. Another possible fix is to use rgba background values instead of opacity.</p>
  
  <p>Has anyone else encountered this? If so, how did you fix it?</p>