避免z-index相对于父元素起作用 [英] Avoid z-index working relative to the parent element

问题描述

我要问一个有关z-index属性的奇怪行为的问题。术语或层的情况如下：

I come with a question about an odd behavior regarding the z-index property. The situation in terms or layers is the following:

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（取决于大小写）。有点像典型的灯箱。

The thing then is that I want to have a semi-transparent black layer over everything, with the next exception: over it I want another arbitrary div (depending on the case). A bit like the typical light-box.

现在发生的是，由于z-index较高，应该位于黑层上方的弹出窗口是

What's happening now is that the pop-up, which is supposed to be over the black-layer, since their z-index is higher, is actually under it.

经过几次尝试，我的结论是，发生这种情况的原因是因为＃pop-up是#sidebar的子级。确实，如果我把它放在外面，它会像我假装的那样工作。像这样：

My conclusion after several tries is that the reason this occurs like so is because #pop-up is a child of #sidebar. Indeed, if I put it outside, it works as I pretend. Like:

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

但这根本不是一个好的解决方案。首先，因为从HTML的角度来看，它在语义上是不正确的。而且还因为我必须要有更多的弹出窗口在代码的其他部分并不是一个好主意，而是通过将所有逻辑都分开来分开这种逻辑。

But this is not a good solution at all. First because it is not semantically correct from the point of view of the HTML. And also because I have the necessity of having more "pop-ups" in other parts of the code and is not a good idea split the logic this way by keeping separately all of them.

预先感谢您。

更新：现在更奇怪了。我没有做任何更改，只是在Firefox（而不是Chrome）中进行了测试，并且可以按我预期的那样在其中运行，因此弹出式窗口实际上是黑色的。还有歌剧。并且在Maxthon中不起作用。作为说明，我正在使用Linux。

Update: It is even more strange now. I haven't changed anything, but just made a test in Firefox instead of Chrome, and it works there as I expected, so the pop-up is in fact over the black-layer. And also in Opera. And it does not work in Maxthon. Just as a note, I'm using Linux.

推荐答案

现在发生的是流行音乐-up，实际上应该位于黑色层上，因为它们的z-index较高，实际上在其下方。

What's happening now is that the pop-up, which is supposed to be over the black-layer, since their z-index is higher, is actually under it.

由于它应该很好。 z-index 是定义明确的，例如规范的这一部分：

As it perfectly well should be. z-index is perfectly well defined, for example in this part of the spec:

每个盒子都属于一个堆叠上下文。给定堆叠上下文中
中每个定位的框都有一个整数堆栈级别，这是它在z轴上
在相同
堆叠上下文中相对于其他堆栈级别的位置。具有较高堆栈级别的框始终在具有较低堆栈级别的框前格式化
。盒子的负筹码量可能为负b $ b。堆叠上下文
中具有相同堆叠级别的框将根据文档树顺序从头到尾堆叠。

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

根元素构成了根堆叠上下文。其他堆叠的
上下文是由具有$ z $的计算值（而不是
自动）的任何定位元素（包括相对
个定位元素）生成的。堆叠上下文不一定与包含
块相关。

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks.

在每个堆叠上下文中，以下各层以
的顺序绘制：

Within each stacking context, the following layers are painted in back-to-front order:

1. 形成堆叠上下文的元素的背景和边框。


2. 子堆叠上下文


3. 流入，非内联级别，未定位的后代。


4. 非定位的浮点数。


5. 流入的，内联级别的，未定位的后代，包括内联表和内联块。


6. 子堆栈堆栈级别为0的上下文以及堆栈级别为0的已定位后代。


7. 堆栈级别为正（子级最低的孩子）的子堆栈上下文。

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

您错误地假设z索引在整个文档中共享，而z索引仅在r自己的堆栈上下文，实际上是为每个z索引元素创建的-因此，您的 #popup 是 #sidebar ，但两者都堆叠在＃black-layer 下，因为它在根堆叠上下文中较高。较旧版本的IE（在怪癖模式下）实际上使用了您所期望的模型，但后来已修复。

You are incorrectly assuming z-indexes are shared amongst the entire document, while they are only valid within their own stacking context, which is actually created for every z-indexed element - therefore your #popup is the highest element in #sidebar, but both are stacked underneath #black-layer as it is higher in the root stacking context. Older versions of IE (in quirks mode) actually used the model you are expecting, but that was fixed later on.

因此，您需要移动一些元素。从语义上讲，这根本没有关系，因为实际上您仍然需要JS来克隆/生成弹出窗口。

So, you'll need to move some elements around. Semantically, that doesn't matter at all since you'll be needing JS anyway to clone/generate the popups in practice.

这篇关于避免z-index相对于父元素起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！