CSS 哪个更重要：浏览器中的不透明度或 z-index？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2837057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What has bigger priority: opacity or z-index in browsers?
提问by Martin Vseticka
I'm coding a "popup window" in JavaScript and I've come across an interesting thing:
我正在用 JavaScript 编写一个“弹出窗口”，我遇到了一件有趣的事情：
The navy square under the popup window is visible even though I would expect it to be hidden. The popup was added after the square, so it should be on the top.
即使我希望它被隐藏，弹出窗口下的海军广场也是可见的。弹出窗口是在方块之后添加的，所以它应该在顶部。
CSS opacityproperty of the navy square is 0.3. From what I've tried, it seems that every number from the interval (0,1)would yield the same result. If I change it to 1, then it behaves as expected (i.e. the part of the square under the popup is hidden).
opacity海军广场的CSS属性是0.3. 根据我的尝试，间隔中的每个数字似乎(0,1)都会产生相同的结果。如果我将其更改为1，则它会按预期运行（即弹出窗口下的方块部分被隐藏）。
I've tried to set the z-indexproperty to 10for the square and 100for the popup, but it doesn't change anything.
我试图将z-index属性设置10为正方形和100弹出窗口，但它没有改变任何东西。
What am I missing? Why is part of square displayed?
我错过了什么？为什么显示正方形的一部分？
Tested browsers:
测试浏览器：
- Firefox 3.6.x
- Chrome 4
- 火狐 3.6.x
- 铬 4
回答by 0b10011
This is not a bug and is actually how it's supposed to work. It's a bit confusing as the elaborate description of Stacking Contextsdoesn't mention anything about it. However, the visual formatting modulelinks to the color modulewhere this particular gotcha canbe found (emphasis mine):
这不是错误，实际上它应该如何工作。这有点令人困惑，因为Stacking Contexts的详细描述没有提到任何关于它的内容。但是，视觉格式模块链接到可以找到此特定问题的颜色模块（重点是我的）：
Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0' and ‘opacity: 1'.If an element with opacity less than 1 is positioned, the ‘z-index' property applies as described in [CSS21], except that ‘auto' is treated as ‘0' since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).
由于不透明度小于 1 的元素是从单个屏幕外图像合成的，因此其外部的内容不能在其内部的内容片段之间按 z 顺序分层。出于同样的原因，实现必须为不透明度小于 1 的任何元素创建一个新的堆叠上下文。如果不透明度小于 1的元素未定位，则实现必须在其父堆叠上下文中绘制它创建的层，同时如果它是带有“z-index: 0”和“opacity: 1”的定位元素，将使用堆叠顺序。如果定位不透明度小于 1 的元素，则 'z-index' 属性如 [CSS21] 中所述应用，除了 'auto' 被视为 '0'，因为总是创建新的堆叠上下文。有关堆叠上下文的更多信息，请参见 [CSS21] 的第 9.9 节和附录 E。本段中的规则不适用于 SVG 元素，因为 SVG 有自己的渲染模型（[SVG11]，第 3 章）。
回答by Guillaume Esquevin
It's not a problem of opacitybeing more important than z-index, rather than z-indexbeing relative to their stacking context (see z-indexin the CSS2 specification).
这不是opacity比 更重要的问题z-index，而不是z-index相对于它们的堆叠上下文（参见CSS2 规范中的z-index）。
In other words, z-indexare only significant within the context of a positioned ancestor (whether its relative, absolute or fixed). What you need to do to fix your problem is add a position: relative;to the element that contain both your popup and your navy square, and probably add it a z-index: 1;. Seeing your screenshot it will probably be a top element such as a wrapper div.
换句话说，z-index仅在定位祖先的上下文中才有意义（无论是相对的、绝对的还是固定的）。您需要做的来解决您的问题是将 a 添加position: relative;到包含您的弹出窗口和海军广场的元素中，并且可能将其添加一个z-index: 1;. 看到您的屏幕截图，它可能是顶级元素，例如包装器 div。
回答by Enzo DB
Workaround for two elements, like divs: add a 0.99opacity to your top element, and the order of both is reestablished.
两个元素（如 div）的解决方法：0.99向顶部元素添加不透明度，并重新建立两者的顺序。
opacity: 0.99;
回答by cryo
Example code might be needed to debug this problem.
可能需要示例代码来调试此问题。
You might put overflow: hiddenand possibly position: relativein a DIVwhich surrounds all the editor objects to try to force the elements to only be drawn within that DIV, e.g:
您可以放置overflow: hidden并且可能放置position: relative在DIV围绕所有编辑器对象的a 中，以尝试强制元素仅在其中绘制DIV，例如：
<div style="overflow: hidden; position: relative">
(Editor object buttons go here)
</div>
As a last resort, you could also try a iframein between the two elements to try to stop them seeping through.
作为最后的手段，您还可以尝试iframe在两个元素之间添加一个元素，以阻止它们渗透。
回答by Cipi
You might try to set the popup window's DIV like this using !importantso the style doesn't change on applying new style or class:
您可以尝试使用!important这样设置弹出窗口的 DIV，这样样式在应用新样式或类时不会改变：
background-color: white !important;
z-index: 100 !important;
opacity: 1.0 !important;
Then, make new CSS class:
然后，创建新的 CSS 类：
.PopupElement
{
z-index: inherited;
opacity: inherited;
}
And add class to all elements in the window, like this for example:
并将类添加到窗口中的所有元素，例如：
<input value="posx" class="some_class PopupElement"/>
My guess is that this would work, since there is no priority in applying CSS attributes... as far as I know. =)
我的猜测是这会起作用，因为应用 CSS 属性没有优先级……据我所知。=)
回答by Peter Janes
I had the same issue. Using rgba instead of color/opacity solved my problem. Working with LESS (in the Bootstrap framework), the fade() function did the conversion for me.
我遇到过同样的问题。使用 rgba 而不是颜色/不透明度解决了我的问题。使用 LESS（在 Bootstrap 框架中），fade() 函数为我完成了转换。
回答by Mr. Duhart
Although @Guillaume Esquevin already gave a great answer, I will try to expand on it in case someone ignores what a stacking context is (like I did).
尽管@Guillaume Esquevin 已经给出了很好的答案，但我将尝试对其进行扩展，以防有人忽略堆叠上下文是什么（就像我所做的那样）。
As you can read here, there is something called stacking context, which refers to a group of elements sharing a parent that move together in the stack. An example could be a div and all its children.
正如你在这里读到的，有一种叫做堆叠上下文的东西，它指的是一组共享父元素的元素，它们在堆栈中一起移动。一个例子可能是一个 div 及其所有的孩子。
There are three ways to create a stacking context: in the root of the document (the html element), by positioning the parent element, and by changing the opacity of the parent to something lower than 1.
有三种方法可以创建堆叠上下文：在文档的根（html 元素）中，通过定位父元素，以及通过将父元素的不透明度更改为低于 1 的值。
Then, if you have a div with opacity lower than 1 and you want some sibling element of this div to appear behind it (and its children), you can create a new stacking context on such sibling by setting its position to relative or by changing its opacity as well.
然后，如果您有一个不透明度低于 1 的 div 并且您希望此 div 的某个兄弟元素出现在其后面（及其子元素），则可以通过将其位置设置为相对或更改来在此类兄弟元素上创建一个新的堆叠上下文它的不透明度也是如此。
