什么更重要：浏览器中的不透明度或 z-index？答案

【问题标题】：What has bigger priority: opacity or z-index in browsers?什么更重要：浏览器中的不透明度或 z-index？
【发布时间】：2011-02-19 16:36:39
【问题描述】：

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

弹出窗口下方的海军方块是可见的，即使我希望它被隐藏。弹出窗口是在正方形之后添加的，所以它应该在顶部。

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

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

我错过了什么？为什么显示部分正方形？

经过测试的浏览器：

Firefox 3.6.x
铬 4

【问题讨论】：

我猜这可能是一个错误/未实现的功能。但是，由于我对 CSS 了解不多，我认为我没有资格回答它。其他浏览器是否也以同样的方式显示？你用的是什么浏览器？
弹出窗口的所有元素（版本、PosX、PosY...）是否都有z-index: 100; 或z-index: inherited;？
我曾经遇到过同样的问题。我认为这是 $browser (firefox?) 中的一个错误
我的一般意见是设计师根本不应该使用不透明度，除非绝对必要。我认为那里有一些无知的设计师使用“不透明度”作为选择他们想要的颜色的一种方式（可能更亮或更柔和）没有意识到不透明度参数有奇怪的副作用，并且你可以选择任何颜色只使用 RGB值，没有不透明度。

标签： css z-index opacity

【解决方案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 章）。

【讨论】：

即使是“它应该如何工作”，对于更多的人来说也是非常违反直觉的。我会说这是规范中的一个缺陷。这是一个使用jsfiddle.net/WzvLU/1的例子
@Luke 欢迎来到网络世界，由业内最糟糕的人制定规则。只看属性名称。你想垂直对齐，我们称之为 align-items，你想水平对齐，我们称之为 justify-items。
@atilkan 我相信这种奇怪的行为是由于未指定的行为以及与浏览器实现它的方式相匹配（2003 spec vs 2008 spec where this was specified）。至于align-items 等，它们之所以这样命名，是因为它们不一定锁定在轴上。也就是说，如果另一个属性发生变化，该属性可以保持不变但应用于不同的轴。（Tab/fantasai 做了一些很棒的工作making the names standard across specs。）
如果不能简单解释，说明有问题。为什么你甚至试图谈论废话的逻辑。为什么我们应该除此之外。这是错误的。

【解决方案2】：

这不是opacity 比z-index 更重要的问题，而不是z-index 相对于它们的堆叠上下文（参见CSS2 规范中的z-index）。

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

【讨论】：

其实是与opacity相关的问题。请参阅w3.org/TR/css3-color/#transparency -- 特别是“...实现必须为不透明度小于 1 的任何元素创建新的堆叠上下文。...”
position: relative 修复对我有用！谢谢纪尧姆·埃斯奎文

【解决方案3】：

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

opacity: 0.99;

【讨论】：

【解决方案4】：

使用不透明度的替代方法是使用透明颜色（带有 alpha 值）

所以，而不是使用

{
    background: gray;
    opacity: 0.5;
}

你可以试试

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

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

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：

【解决方案6】：

您可以尝试使用!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 属性方面没有优先级……据我所知。 =)

【讨论】：

【解决方案7】：

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

【讨论】：

最好的建议，我认为！对我来说有效： background-color: rgba(20,20,20, 0.7);这也可以正常工作： background-image: linear-gradient(to bottom, rgba(0,0,0,0.8) , rgba(50,50,50,0.5));

【解决方案8】：

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

您可以阅读here，有一种称为堆栈上下文的东西，它指的是一组共享父元素的元素，它们在堆栈中一起移动。一个例子可以是一个 div 和它的所有子元素。

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

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

【讨论】：