什么有更大的优先权:浏览器中的不透明度或z索引？
我正在JavaScript中编写一个“弹出窗口”，我遇到了一件有趣的事情：
在弹出式窗口下的海军广场是可见的，尽管我希望它是隐藏的。弹出窗口是在正方形之后添加的，所以应该在顶部。
海军广场的CSS opacity属性是0.3。根据我的尝试，似乎间隔(0,1)中的每个数字都会产生相同的结果。如果我将其更改为1，那么它的行为就像预期的那样(即弹出窗口下的方块部分是隐藏的)。
我曾尝试将z-index属性设置为10表示正方形，将100设置为弹出窗口，但它没有改变任何事情。
我遗漏了什么？为什么广场的一部分是展示的？
经过测试的浏览器：
- Firefox 3.6.x
- 铬4
回答 8
Stack Overflow用户
发布于 2012-07-31 14:11:25
这不是一个bug，实际上它应该如何工作。这有点让人困惑，因为堆叠上下文的详细描述没有提到任何关于它的内容。但是，可视化格式化模块链接到色彩模块，在那里可以找到这个特定的问题(重点是我的)：
由于不透明度小于1的元素是从单个屏幕外图像组合而来的，因此它之外的内容不能在其内部的内容片段之间按z顺序分层。出于同样的原因，实现必须为任何不透明度小于1的元素创建一个新的堆叠上下文。如果不透明度小于1的元素未定位，则实现必须在其父堆叠上下文中以与“z-index:0”和“不透明度:1”的定位元素相同的叠加顺序绘制它创建的层，如果不透明度小于1的元素定位在中，则应用“z-index”属性，如CSS21中所述，除了“auto”被视为‘0’，因为总是创建一个新的堆叠上下文。有关堆叠上下文的更多信息，请参见CSS21的9.9节和附录E。本段中的规则不适用于SVG元素，因为SVG有自己的呈现模型(SVG11，第3章)。
Stack Overflow用户
发布于 2010-05-17 12:47:22
这不是一个opacity比z-index更重要的问题，而不是z-index相对于它们的堆叠上下文的问题(参见CSS2规范中的Z-指数 )。
换句话说，z-index仅在定位祖先的上下文中才有意义(无论是相对的、绝对的还是固定的)。要解决问题，您需要做的是将一个position: relative;添加到包含弹出窗口和海军方框的元素中，并可能添加一个z-index: 1;。看到你的截图，它可能是一个顶级元素，比如包装器div。
Stack Overflow用户
发布于 2012-09-13 20:44:54
解决两个元素的问题，比如div:向顶级元素添加一个0.99不透明度，然后重新建立这两个元素的顺序。
opacity: 0.99;https://stackoverflow.com/questions/2837057
复制相似问题
腾讯云开发者
