什么有更高的优先级：浏览器中的不透明度或z-index？

Question

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

弹出窗口下的海军广场是可见的，即使我希望隐藏它。弹出广告后添加了弹出窗口，因此它应位于顶部。

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

我尝试为广场设置z-index属性为10，为弹出窗口设置100，但它不会改变任何内容。

我错过了什么？为什么要显示方块的一部分？

经过测试的浏览器：

• Firefox 3.6.x
• Chrome 4

Answer 1

这不是一个错误，实际上它应该如何工作。由于elaborate description of Stacking Contexts没有提及任何相关内容，因此有点令人困惑。但是，找到visual formatting module的color module链接可以找到 ：

  

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

Answer 2

opacity比z-index更重要，而不是z-index与堆叠上下文相关，这不是问题（请参阅CSS2规范中的z-index）。< / p>

换句话说，z-index仅在定位的祖先（无论是相对的，绝对的还是固定的）的上下文中是重要的。解决问题的方法是在包含弹出窗口和海军广场的元素中添加position: relative;，并可能添加z-index: 1;。看到你的截图，它可能是一个顶级元素，如包装div。

Answer 3

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

opacity: 0.99;

Answer 4

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

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

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

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

Answer 5

您可以尝试使用!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 6

尽管@Guillaume Esquevin已经给出了一个很好的答案，但我会尝试对其进行扩展，以防有人忽略堆栈上下文是什么（就像我一样）。

您可以阅读here，其中有一种叫做堆栈上下文，它是指一组共享父元素的元素在堆栈中一起移动。一个示例可能是div及其所有子级。

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

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

Answer 7

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

所以，而不是使用

{
    background: gray;
    opacity: 0.5;
}

您可以尝试

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

这是不完全相同的，但是我遇到了您遇到的相同问题，以上内容已解决了该问题。

Answer 8

我有同样的问题。使用rgba而不是color / opacity解决了我的问题。使用LESS（在Bootstrap框架中），fade（）函数为我做了转换。