可能存在不透明度和Z-Index的Bug问题

Question

在设置网页透明度时，我遇到了一个非常奇怪的问题。带有透明度的元素会遮挡页面上的其他元素。这种情况发生在Safari、Chrome和Firefox浏览器中，在IE7和8中不支持透明度（Opacity），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背景值而不是不透明度。

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

- B2K

---

可能是 https://dev59.com/VXE85IYBdhLWcg3wUByz 的重复问题。 - Anoop

#content 的 z-index 高于 #sidebar。由于您没有使用 overflow:hidden;，因此 #content 将重叠浮动的 #sidebar。 - Shmiddty

http://jsfiddle.net/V4MrH/1/ - Shmiddty

感谢您的回复@Shmiddty，我只是不确定是否要强制使用overflow：hidden。我更新了我的网站以使用rgba背景。 - B2K

我已经使用rgba解决方案更新了这个fiddle http://jsfiddle.net/V4MrH/28/ - B2K

Answer 1

您所设置的 #content 的不透明度创建了一个新的堆叠上下文，堆叠上下文会影响 z-indexes。因为您没有手动指定 z-indexes，它们被自动分配，并且 #content 在标记中排在后面，因此它比 #sidebar 的值更高。

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

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

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

- bfavaretto

---

这是有意设计的，但相当反直觉的，即将不透明度添加到对象会影响网页的布局。 - B2K

是的，这完全违反直觉。但一旦你弄清楚它的工作原理，它实际上就有意义了。 - bfavaretto

我尝试使用position：relative来解决问题，但没有成功。http://jsfiddle.net/WzvLU/1/ 这对我来说没有意义。 - Luke

@Luke，我不确定你在尝试什么以及存在什么问题。我认为你应该发布自己的问题！ - bfavaretto

Answer 2

该问题已经被确认。 https://www.google.com/#q=opacity%20change%20z-index 建议使用 rgba 背景，该属性也被广泛支持。

- Romain Pellerin

---

我刚刚将这个答案标记为被接受的，因为它实际上解决了我的问题。 - B2K