可能的不透明度Z-Index Bug

Question

在网页上设置不透明度时,我遇到了一个非常奇怪的问题.具有不透明度的元素会遮挡页面上的其他元素.这种情况发生在Safari,Chrome和Firefox中.在IE7和8中忽略不透明度.未在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>

删除不透明度可恢复预期的行为.另一种可能的解决方法是使用rgba背景值而不是不透明度.

有人遇到过这种情况么？如果是这样,你是如何解决的？

Answer 1

您正在设置的不透明度#content是创建新的堆叠上下文,堆叠上下文会影响z索引.由于您没有手动指定z-indexes,因此它们是自动分配的,并且#content具有比#sidebar在标记中稍后出现的值更高的值.

一个简单的CSS的解决方案:只需添加position: relative; z-index: 2到#sidebar(建立另一个堆叠内容).在您的实际代码中,#content如果您有更多元素,则可能还需要添加z-index #wrapper:

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

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