浏览器中的不透明度和 z-index 哪个优先级更高？

Question

我正在用 JavaScript 编写一个“弹出窗口”，我遇到了一件有趣的事情：

弹出窗口下方的海军蓝方块是可见的，尽管我希望它被隐藏。弹出窗口是在方块之后添加的，因此它应该位于顶部。

海军蓝方块的 CSS opacity 属性为 0.3。根据我的尝试，似乎区间 (0,1) 中的每个数字都会产生相同的结果。如果我将其更改为 1，那么它的行为将按预期进行（即弹出窗口下方的正方形部分被隐藏）。

我尝试将正方形的 z-index 属性设置为 10 ，将弹出窗口的 100 设置为 100 ，但它没有改变任何东西。

我缺少什么？为什么显示部分正方形？

测试的浏览器：

• Firefox 3.6.x
• Chrome 4

Answer 1

可能需要示例代码来调试此问题。

您可以将 overflow:hidden 和可能的 position:relative 放在包围所有编辑器对象的 DIV 中，以尝试强制元素仅在在该 DIV 内绘制，例如：

<div style="overflow: hidden; position: relative">
    (Editor object buttons go here)
</div>

作为最后的手段，您还可以尝试在两个元素之间使用 iframe 来阻止它们渗透。

Answer 2

您可以尝试使用 !important 设置弹出窗口的 DIV，这样样式在应用新样式或类时不会改变：

background-color: white !important;
z-index: 100 !important;
opacity: 1.0 !important;

然后，创建新的 CSS 类：

.PopupElement
{
 z-index: inherited;
 opacity: inherited;
}

并将类添加到窗口，例如：

<input value="posx" class="some_class PopupElement"/>

我的猜测是，这会起作用，因为应用 CSS 属性没有优先级......据我所知。 =)

Answer 3

我有同样的问题。使用 rgba 而不是颜色/不透明度解决了我的问题。使用 LESS（在 Bootstrap 框架中），fade() 函数为我完成了转换。

Answer 4

虽然 @Guillaume Esquevin 已经给出了一个很好的答案，但我会尝试扩展它，以防有人忽略堆叠上下文是什么（就像我所做的那样）。

正如您可以在此处阅读的那样，是一种称为堆栈上下文的东西，它指的是一组共享父元素并在堆栈中一起移动的元素。一个例子是 div 及其所有子项。

有三种方法可以创建堆叠上下文：在文档的根目录（html 元素）中，通过定位父元素，以及将父元素的不透明度更改为低于 1 的值。

然后，如果您有一个 div如果不透明度低于 1，并且您希望该 div 的某个同级元素出现在其（及其子级）后面，则可以通过将其位置设置为相对位置或更改其不透明度来在此类同级元素上创建新的堆叠上下文。

Answer 5

这不是一个错误，实际上它应该如何工作。这有点令人困惑，因为堆叠上下文的详细描述没有提及任何相关内容。但是，视觉格式化模块链接到颜色模块，可以在其中找到这个特定的问题（强调我的）：

由于不透明度小于 1 的元素是由单个元素合成的
屏幕外图像，其外部的内容无法按 z 顺序分层
其内部的内容片段之间。出于同样的原因，
实现必须为任何元素创建一个新的堆栈上下文
不透明度小于 1。如果不透明度小于 1 的元素是
未定位，实现必须绘制它创建的层，
在其父堆栈上下文中，以相同的堆栈顺序
如果它是带有 'z-index: 0' 的定位元素并且
'opacity: 1'. 如果定位了不透明度小于 1 的元素，
'z-index' 属性按照 [CSS21] 中的描述应用，除了
'auto' 被视为 '0'，因为新的堆栈上下文总是
创建的。有关更多信息，请参阅 [CSS21] 的第 9.9 节和附录 E
有关堆叠上下文的信息。本段中的规则不
适用于 SVG 元素，因为 SVG 有自己的渲染模型（[SVG11]，
第 3 章）。

Answer 6

这不是 opacity 比 z-index 更重要的问题，而不是 z-index 相对于其堆叠上下文的问题（请参阅z-index）。

换句话说，z-index 仅在定位祖先的上下文中才有意义（无论是相对、绝对还是固定）。要解决问题，您需要做的是将 position:relative; 添加到包含弹出窗口和海军方块的元素，并可能添加它 z-index: 1; 。看到你的屏幕截图，它可能是一个顶部元素，例如包装 div。

Answer 7

两个元素（例如 div）的解决方法：向顶部元素添加 0.99 不透明度，然后重新建立两个元素的顺序。

opacity: 0.99;

Answer 8

使用不透明度的另一种方法是使用透明颜色（带有 alpha 值），

因此，

{
    background: gray;
    opacity: 0.5;
}

您可以尝试

{
    background: rgba(128,128,128,0.5);
}

使用透明颜色，它并不相同，但我遇到了与您遇到的相同问题，上面的方法修复了它。