z-index on absolutely positioned nested elements

Question

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.

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/

Answer 1

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:

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.

What you did there was get children from lower elements and try to get them above children of higher elements.

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.

Answer 2

The core idea is that elements are rendered recursively in DOM tree-order (depth-first):

1. background and borders of element itself
2. positioned children with negative zindex
3. non-positioned content
4. positioned children with zero (or missing) zindex
5. positioned children with positive zindex

This means that tree-order of parents has a priority over z-index of their children.

In example in question all the foo boxes have equal zindex=100 and was tree-ordered at step 3. Some "uncles" of popup are rendered after parents.

References:

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