html - 不透明度如何影响元素顺序？

Question

我发现 CSS opacity 与 float 元素的结合有一个非常奇怪的行为。
考虑以下 HTML:

<div style="position: relative; clear: both">
   <div style="float:left>Left button</div> 
   <div style="float:right>Right button</div>  
</div>
<div style="opacity: 0.9">Overlay</div>

最后一个 div 将覆盖前两个 float 的。移除不透明度会将最新的 div 置于 float 的 div 之下。

这是它在我的真实页面上的样子(红色背景只是用来强调效果): 现在，如果我删除中间 div 的不透明度: 突然， float div 可以访问了。

我尝试了 z-index 属性，但当这没有帮助时我并不感到惊讶。我什至在 JS fiddle 中重现了这一点.

那么，这是什么？有什么解决方法吗？
^{注意:到目前为止，已在 chrome 和 firefox 中测试。结果是一样的。
Opera 也确认了。}

^{PS.: 谁能给我解释一下，为什么 JSFiddle 在全屏结果中不起作用？我认为这不是第一次全屏结果对我不起作用。}

Answer 1

问题是理解stacking contexts以及它们在浏览器中的呈现方式。

• the root element (HTML),
• positioned (absolutely or relatively) with a z-index value other than "auto",
• elements with an opacity value less than 1.
• on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto"

9.9.1 Specifying the stack level: the 'z-index' property

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first). Blockquote

当您对 div 应用不透明度更改时，它会创建一个新的堆叠上下文。这意味着它会创建一个新的堆栈上下文，稍后会呈现(读取:在具有较低级别的堆栈顶部)。

根据您要达到的效果，有不同的解决方案，下面是一个示例，说明如何通过使用 rgba 值而不是不透明度来完全避免不透明度问题。

我强烈建议重组 HTML/CSS 以获得您想要的效果。

这只是一个演示问题的示例。

http://jsfiddle.net/K2nmL/7/

CSS

#allOptions.disabled {
  cursor: default !important;
  background-color: rgba(255,0,0,0.5);
  color: rgba(0,0,0,0.5);
}

#allOptions {
    background-color: red;
}

JavaScript

// Added a function to toggle the `disabled` class

---

更新

一个简单的解决方案是将不透明度更改应用于包装器 div。我添加了一个用 clearfix 包装包装器的 div。这仍然使您的布局保持不变，但它使所有元素保持在相同的堆叠上下文中。

http://jsfiddle.net/K2nmL/8/