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.
<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?
See Question&Answers more detail:os