可能的不透明度Z-Index Bug

Question

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

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

还有其他人遇到过这个吗？如果是这样，你是如何解决它的？

Answer 1

您在#content上设置的不透明度正在创建新的stacking context，而堆叠上下文会影响z索引。由于您未手动指定z-indexes，因此它们是自动分配的，#content的值高于#sidebar，因为它会在标记的后面出现。

一个简单的CSS解决方案：只需将position: relative; z-index: 2添加到#sidebar（以建立另一个堆叠上下文）。在您的真实代码中，如果#content下有更多元素，则可能需要向#wrapper添加z索引：

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

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

Answer 2

这个问题已为人所知。 https://www.google.com/#q=opacity%20change%20z-index

您应该使用rgba background，这也是广泛支持的属性。