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

Question

我发现CSS opacity与浮动元素相结合的行为非常奇怪 请考虑以下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将覆盖前两个浮动的。删除不透明度会将最新的div放在浮动的div下。

这就是它在我的真实页面上的样子（红色背景仅用于强调效果）： 现在，如果我删除中间div的不透明度： Sudenly，浮动的div是可以接受的。

我尝试了z-index属性，但是如果这没有帮助就不会感到惊讶。我甚至实现了在 JS fiddle 中重现这一点。

那么，这是什么？任何解决方法？
^{注意：到目前为止，在chrome和firefox中测试过。结果是一样的。
Opera也证实了这一点。}

^{PS。：有人可以向我解释为什么JSFiddle无法在全屏结果中运行？我认为这不是第一次全屏结果对我不起作用。}

Answer 1

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

  

  
• 根元素（HTML），
  
• 定位（绝对或相对）z-index值不是“auto”，
  
• 具有opacity value less than 1.
的元素   
• 在移动WebKit和Chrome 22+上，position：fixed总是创建一个新的堆叠上下文，即使z-index是“auto”
  

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

  

  
1. 形成堆叠的元素的背景和边界   上下文。
  
2. 具有负堆栈级别的子堆叠上下文（大多数   否定第一）。
  
3. 流入的，非内联级别，未定位的后代。
  
4. 未定位的花车。
  
5. 流入的，内联级别，未定位的后代，包括   内联表和内联块。
  
6. 堆叠级别为0且定位的子堆叠上下文   堆栈级别为0的后代。
  
7. 具有正堆栈级别的子堆叠上下文（最少   积极的第一）。   块引用
  

将不透明度更改应用于div时，会创建新的堆叠上下文。这意味着它会创建一个新的堆叠上下文，以后再渲染（读取：在具有较低级别的堆栈之上）。

根据您尝试实现的效果，有不同的解决方案，这里是一个示例，说明如何通过使用rgba值而不是opacity来完全避免不透明度问题。

我强烈建议重组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。我添加了一个div，用一个clearfix包装包装器。这仍然保持您的布局相同，但它将所有元素保持在相同的堆叠上下文中。

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

Answer 2

你只清除浮动的一侧 - 左侧，因此#wrapper将出现0高度问题。我添加了一个clearfix类：

.clear:after {
    content: "";
    display: table;
    clear: both;
}

Take a look

另外，你在开始时需要那些<br>吗？使用填充/边距更好地实现相同的效果。