我有一个关于z-index属性的奇怪行为的问题。术语或层次的情况如下：
div#wrapper
div#sidebar (fixed position and 5 as z-index)
div#pop-up (absolute position and 15 as z-index)
div#black-layer (fixed position and 10 as z-index)
然后我想在所有东西上都有一个半透明的黑色层，下一个例外：在它上面我需要另一个任意div（取决于具体情况）。有点像典型的灯箱。
现在发生的事情是，由于z-index较高，弹出窗口应该在黑色层上，实际上是在它下面。
经过多次尝试后我得出的结论是，这种情况发生的原因是因为#pop-up是#sidebar的孩子。事实上，如果我把它放在外面，它就像我假装的那样工作。像：
div#wrapper
div#sidebar
div#pop-up
div#black-layer
但这根本不是一个好的解决方案。首先，因为从HTML的角度来看它在语义上是不正确的。而且因为我有必要拥有更多的弹出窗口＆＃34;在代码的其他部分并不是一个好主意，通过分开所有这些来分离逻辑。
非常感谢你。
更新：现在更奇怪了。我没有改变任何东西，但只是在Firefox而不是Chrome中进行测试，它按照我的预期在那里工作，所以弹出窗口实际上是在黑色层上。而且在Opera中。并且在Maxthon中不起作用。就像一张纸条，我正在使用Linux。
答案 0 :(得分：3)
现在正在发生的事情是，弹出窗口应该是黑色层，因为它们的z索引更高，实际上是在它下面。
完全应该如此。 z-index为perfectly well defined，例如this part of the spec：
每个框属于一个堆叠上下文。每个定位的盒子在一个 给定堆栈上下文有一个整数堆栈级别，这是它的 z轴上的位置相对于其他堆栈级别 堆叠上下文。总是格式化具有更高堆栈级别的框 在堆叠水平较低的盒子前面。盒子可能有负面 堆栈级别。在堆叠上下文中具有相同堆栈级别的框 根据文档树顺序从前到后堆叠。
根元素形成根堆叠上下文。其他堆叠 上下文由任何定位元素生成（包括相对的元素） 定位元素）具有除'之外的'z-index'的计算值 '汽车'。堆叠上下文不一定与包含有关 块。
在每个堆叠上下文中，绘制了以下图层 从前到后的订单：
- 构成堆叠背景的元素的背景和边框。
- 子堆叠上下文具有负堆栈级别（最多为负数）。
- 流入的，非内联级别，未定位的后代。
- 未定位的花车。
- in-flow，内联级别，非定位后代，包括内联表和内联块。
- 堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。
- 具有正堆栈级别的子堆叠上下文（最少积极的第一个）。
您错误地认为z-index在整个文档中共享，而它们仅在自己的堆栈上下文中有效，这实际上是为每个z-indexed元素创建的 - 因此您的#popup是最高元素在#sidebar中，但两者都堆叠在#black-layer下面，因为它在根堆叠上下文中更高。较旧版本的IE（在怪癖模式下）实际上使用了您期望的模型，但稍后会修复。
所以，你需要移动一些元素。从语义上讲，这根本不重要，因为你无论如何都需要JS在实践中克隆/生成弹出窗口。