我正在用JavaScript编写“弹出窗口”的代码，遇到了一件有趣的事情：
弹出窗口下方的海军方块是可见的，即使我希望它被隐藏。弹出框是在正方形之后添加的，因此它应该在顶部。
海军方形的CSS opacity属性为0.3。根据我的尝试，似乎间隔(0,1)中的每个数字都会产生相同的结果。如果我将其更改为1，则它的行为符合预期（即，弹出窗口下方的正方形部分被隐藏）。
我试图将z-index属性设置为正方形的10，将弹出窗口设置为100，但是它没有任何改变。
我想念什么？为什么显示正方形的一部分？
经过测试的浏览器：
Firefox 3.6.x
镀铬4
最佳答案
这不是错误，实际上是它应该如何工作的。由于elaborate description of Stacking Contexts没有提及任何相关信息，这有点令人困惑。但是，visual formatting module链接到color module可以找到此特定陷阱的位置（重点是我的）：
由于不透明度小于1的元素是由单个元素合成的
屏幕外图像，其外部内容无法按z顺序分层
之间的内容之间。出于同样的原因，
实现必须为任何元素创建一个新的堆栈上下文
不透明度小于1的元素。如果不透明度小于1的元素是
没有定位，实现必须绘制其创建的层，
在其父堆叠上下文中，以与
如果该元素是定位元素且具有“ z-index：0”且
“不透明度：1”。如果放置了不透明度小于1的元素，
“ z-index”属性如[CSS21]中所述适用，除了
由于始终有新的堆叠上下文，因此将“自动”视为“ 0”
创建。有关更多信息，请参见9.9节和[CSS21]的附录E
有关堆栈上下文的信息。本段中的规则不
适用于SVG元素，因为SVG具有自己的渲染模型（[SVG11]，
第3章）。
关于css - 哪个优先级更高:浏览器中的不透明度或z-index？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56954616/