避免z-index相对于父元素工作

Question

我有一个关于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) 

的事情，然后是我想拥有了一切半透明黑色层，下一个例外：在这我想其他的任意格（视案子）。有点像典型的灯箱。

现在发生的事情是，弹出框应该位于黑色层之上，因为它们的z-索引更高，实际上是在它之下。

我在几次尝试之后得出的结论是，这种情况发生的原因是因为＃弹出窗口是#sidebar的子窗口。事实上，如果我把它放在外面，它就像我假装一样。像：

div#wrapper 
    div#sidebar 
    div#pop-up 
div#black-layer 

但是，这不是一个好的解决方案。首先，因为从HTML的角度来看，它在语义上是不正确的。另外，因为我有必要在代码的其他部分添加更多的“弹出窗口”，并且不是一个好主意，因此通过分开保存所有这些方法来分割逻辑。

谢谢你的优势。

更新：现在更奇怪了。我没有改变任何东西，只是在Firefox而不是Chrome上进行测试，并且按照我的预期在那里工作，所以弹出窗口实际上是在黑色层。而且在Opera中。在傲游中不起作用。就像一个笔记，我正在使用Linux。

Answer 1

现在发生的事情是，弹出窗口应该在黑色层以上，因为他们的z-索引更高，实际上是在它之下。

因为它应该是完美的。 z-index是perfectly well defined，例如在this part of the spec：

每个框属于一个堆叠内容。给定堆叠上下文中的每个定位框在 中都有一个整数堆栈级别，它是相对于同一个 堆栈上下文中的其他堆栈级别在z轴上的位置。具有较高堆叠等级的盒子总是在具有较低堆叠等级的盒子前格式化为 。盒子可能有负数 堆栈级别。根据文档树的顺序，在堆叠环境 中具有相同堆栈级别的框按照先后顺序堆叠。

根元素形成根堆栈上下文。其他堆栈 上下文由具有除“ ”auto之外的'z-index'的计算值的任何定位元素（包括相对定位元素的相对 ）生成。堆叠上下文不一定与包含 块有关。

在每个堆叠上下文中，下面的层被涂在背面 到前序：

1. 背景和形成堆叠环境的元素的边界。
2. 孩子堆叠负面堆栈级别的情况下（最负面的第一个）。
3. 流入式，非内联式，非定位后代。
4. 非定位花车。
5. 流入内联级别的未定位后代，包括内联表和内联块。
6. 子堆叠堆栈级别为0的上下文以及堆栈级别为0的定位后代。
7. 子堆叠正堆栈级别（最不积极优先）的上下文。

你错误地认为Z-索引整个文档之间共享，而他们只是自己的堆叠环境，这实际上是为每一个Z-索引元素创建内有效 - 因此你#popup是最高的元素#sidebar，但两者都堆叠在#black-layer之下，因为它在根堆栈上下文中更高。旧版本的IE（以怪癖模式）实际上使用了您期望的模型，但稍后会修复此模型。

所以，你需要移动一些元素。从语义上讲，这根本就没有关系，因为无论如何，您需要JS来在实践中克隆/生成弹出窗口。