css - 可能的不透明度 Z 索引错误

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创建一个新的stacking context，并且 stacking contexts 会影响 z-indexes。由于您没有手动指定 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/

Answer 2

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

您应该使用 rgba 背景，这也是一个广泛支持的属性。