Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

css - Possible Opacity Z-Index Bug

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...