z-index绝对定位的嵌套元素 [英] z-index on absolutely positioned nested elements

问题描述

我有一些绝对定位的盒子。
其中一个有嵌套弹出框，大于框。

I have some absolutely positioned boxes. One of them has nested popup, larger then box. I want to make popup in front of all the boxes.

设置 z-index：100 在框上和 z-index：200 在弹出窗口没有帮助。
在弹出框之后的文档顺序中的框显示为弹出。
我错过什么关于z-index？

Setting z-index: 100 on boxes and z-index: 200 on popup does not help. Boxes going in doc-order after box with popup appear to be over popup. What do I miss about 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/ 快速了解这一切。特别是在它所说的部分：

You need to look at https://css-tricks.com/almanac/properties/z/z-index/ for a quick understanding of all this. Especially on the part where it says:

还要注意，嵌套起着很大的作用。如果元素B位于元素A的顶部，元素A的子元素永远不能高于元素B.

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

All you needed to do was get the #b1 box on z-index 101:

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>

固定在此小提琴上以便您理解。

I have this fixed on this fiddle for you to understand.

这篇关于z-index绝对定位的嵌套元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！