绝对定位嵌套元素的z-index

Question

我有一些绝对定位的盒子。 其中一个有嵌套弹出窗口，大于框。 我想在所有方框前弹出一个弹出窗口。

在框上设置z-index: 100并在弹出窗口设置z-index: 200没有帮助。 弹出框后面的文档顺序框似乎是弹出窗口。 我对Z-indices有什么看法？

div {
    border: 1px solid black;
}

.container {
    position: relative;
}

.foo {
    position: absolute;
    background-color: white;
    width: 5em;
    z-index: 100;
}

#b0 {
    top: 0em;
    left: 0em;
}

#b1 {
    top: 3em;
    left: 1em;
}

#b2 {
    top: 6em;
    left: 2em;
}

#b3 {
    top: 9em;
    left: 3em;
}

#b4 {
    top: 12em;
    left: 4em;
}

.popup {
    z-index: 200;
    position: absolute;
    left: 1em;
    top: -1em;
    width: 8em;
    height: 8em;
    background-color: grey;
}

<div class="container">
    <div class="foo" id="b0">
        <span>absolute box b0</span>
    </div>
    <div class="foo" id="b1">
        <span>absolute box b1</span>
        <div class="popup">
            popup box inside b1
        </div>
    </div>
    <div class="foo" id="b2">
        <span>absolute box b2</span>
    </div>
    <div class="foo" id="b3">
        <span>absolute box b3</span>
    </div>
</div>

http://jsfiddle.net/B59pR/2/

Answer 1

您需要查看https://css-tricks.com/almanac/properties/z/z-index/以便快速了解所有这些内容。特别是在它所说的部分：

  

另请注意，嵌套起着重要作用。如果元素B位于元素A的顶部，则元素A的子元素永远不会高于元素B.

你在那里所做的是让来自较低元素的孩子，并试图让他们高于更高元素的孩子。

您需要做的就是在z-index 101上获取＃b1框：

＆＃13;

＆＃13;

div {
    border: 1px solid black;
}

.container {
    position: relative;
}

.foo {
    position: absolute;
    background-color: white;
    width: 5em;
    z-index: 100;
}

#b0 {
    top: 0em;
    left: 0em;
}

#b1 {
    top: 3em;
    left: 1em;
}

#b2 {
    top: 6em;
    left: 2em;
}

#b3 {
    top: 5em;
    left: 3em;
}

#b1 {
    z-index: 101;
}

.popup {
    z-index: 200;
    position: absolute;
    left: 3em;
    top: -1em;
    width: 8em;
    height: 8em;
    background-color: grey;
}

＆＃13;

<div class="container">
    <div class="foo" id="b0">
        <span>absolute box b0</span>
    </div>
    <div class="foo" id="b1">
        <span>absolute box b1</span>
        <div class="popup">
            popup box inside b1
        </div>
    </div>
    <div class="foo" id="b2">
        <span>absolute box b2</span>
    </div>
    <div class="foo" id="b3">
        <span>absolute box b3</span>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我已在此fiddle修复此问题，以便您理解。

Answer 2

核心思想是在DOM树顺序（深度优先）中递归呈现元素：

1. 元素本身的背景和边框
2. 定位负zindex的儿童
3. 非定位内容
4. 定位零（或缺少）zindex
的儿童
5. 定位具有正zindex的儿童

这意味着父母的树顺序优先于他们孩子的z-index。

在所讨论的示例中，所有foo框具有相等的zindex = 100并且在步骤3中按树排序。弹出窗口的一些“叔叔”在父母之后呈现。

参考文献：

https://www.w3.org/TR/CSS22/visuren.html#propdef-z-index  https://www.w3.org/TR/CSS22/zindex.html