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

Question

我在JavaScript中编写了一个"弹出窗口",我遇到了一个有趣的事情:

弹出窗口下方的海军广场是可见的,即使我希望隐藏它.弹出广告后添加了弹出窗口,所以应该在顶部.

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

我试图将z-index属性设置10为方块和100弹出窗口,但它不会改变任何东西.

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

经测试的浏览器:

• Firefox 3.6.x.
• Chrome 4

Answer 1

这不是一个错误,实际上它是如何工作的.由于Stacking Contexts的详细描述没有提及任何相关内容,因此有点令人困惑.但是,可视化格式化模块链接到可以找到此特定问题的颜色模块(强调我的):

由于不透明度小于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).

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

Answer 3

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

所以，而不是使用

{
    background: gray;
    opacity: 0.5;
}

你可以尝试

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

它并不相同，但我遇到了与您相同的问题，并且上述解决了它。

Answer 4

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

opacity: 0.99;