不透明度如何影响元素顺序? [英] How does opacity affect element order?

问题描述

我发现CSS opacity 与浮动元素结合使用时的行为确实很奇怪.
考虑使用以下HTML:

 < div style ="position:相对；清除:两者">< div style ="float:left>向左按钮</div>< div style ="float:right>右按钮</div></div>< div style ="opacity:0.9"> Overlay</div> 

最后一个 div 将覆盖前两个浮动对象.删除不透明度会将最新的div置于浮动的div之下.

这是我在现实生活中的页面的外观(红色背景只是用来强调效果):现在，如果我去除了中间div的不透明度，请执行以下操作:突然，浮动div是必需的.

我尝试了 z-index 属性，但是当这样做没有帮助时，我并不感到惊讶.我什至实现了在 JS小提琴 中重现这一点.

那是什么?有任何解决方法吗?
^{注意:到目前为止，已在chrome和firefox中进行了测试.结果是相同的.
Opera也确认了.}

^{PS.:谁能向我解释为什么JSFiddle无法在全屏显示中工作?我认为这不是第一次全屏结果对我不起作用.}

解决方案

问题在于了解堆叠上下文及其在浏览器中的呈现方式.

• 根元素(HTML)
• (绝对或相对)以自动"以外的z索引值定位
• 元素的不透明度值小于1.
• 在移动版WebKit和Chrome 22+上，位置:固定始终会创建新的堆叠上下文，即使z-index为自动"

9.9.1指定堆栈级别:"z-index"财产

1. 构成堆叠的元素的背景和边界上下文.
2. 具有负堆栈级别的子堆栈上下文(大多数否定优先).
3. 流入，非内联级别，未定位的后代.
4. 未定位的浮点数.
5. 流入，内联级别，未定位的后代，包括内联表和内联块.
6. 具有堆栈级别0和位置的子堆栈上下文堆栈级别为0的后代.
7. 具有正堆栈级别的子堆栈上下文(最小正面优先).区块引用

将不透明度更改应用于div时，它将创建一个新的堆叠上下文.这意味着它将创建一个新的堆栈上下文，该上下文稍后将呈现(请阅读:在较低级别的堆栈顶部).

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

我强烈建议重组HTML/CSS以获得所需的效果.

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

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

CSS

 #allOptions.disabled {游标:默认！important;背景颜色:rgba(255,0,0,0.5);颜色:rgba(0,0,0,0.5);}#allOptions {背景颜色:红色；} 

JavaScript

 ///添加了切换"disabled"类的功能 

---

更新

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

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

I have found a really strange behaviour for the CSS opacity combined with floating elements.
Consider following 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>

The last div will overlay the first two floating ones. Removing the opacity will put the latest div under the floating ones.

This is how it looks on my real-life page (red background is just used to emphasize the effect): Now, if I remove the opacity of the middle div: Sudenly, the floating divs are acessible.

I tried the z-index property, but wasn't surprised when this didn't help. I even achieved to reproduce this in JS fiddle.

So, what's this? Any workarounds?
^{Note: so far, tested in chrome and firefox. The result was the same.
Opera confirmed too.}

^{PS.: Could anyone explain to me, why JSFiddle does not work in full-screen result? I think this is not the first time full screen result didn't work for me.}

解决方案

The problem is understanding stacking contexts and how they're rendered in the browser.

• 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

When you apply an opacity change to the div, it creates a new stacking context. This means it creates a new stacking context that gets rendered later on (read: on top of stacks with lower levels).

There are different solutions depending on the effect you're trying to achieve, here's an example of how you can avoid the opacity issue entirely by using rgba values instead of opacity.

I highly suggest restructuring the HTML/CSS to get the effect you're looking for.

This is just an example to demonstrate the issue.

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

---

Update

A simple solution would be to apply the opacity change to a wrapper div. I added a div that wraps the wrapper with a clearfix. This still keeps your layout the same, but it keeps all the elements inside the same stacking context.

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

这篇关于不透明度如何影响元素顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！