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

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

在框上设置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/

解决方法

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

Also note that nesting plays a big role. If an element B sits on top of element A,a child element of element A can never be higher than element B.

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

你需要做的就是在z-index 101上获得#b1框：

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;
}

<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>

我已将此修复于此fiddle以供您理解.

原文地址：https://www.jb51.cc/html/231970.html