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/

Dendritic

To start with, there's no such thing as nested absolutely positioned elements. Doing position: absolute; takes out the element from the default flow. – Palatial

@Abody97 — That doesn't prevent elements from being nested within each other. – Nipa

@Palatial absolutely-positioned elements are in different stacking contexts but you can have nested absolutely positioned elements. Just put them inside a position: relative parent container. – Worcestershire

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.

Bally

That explanation about "B on top of A" misses parent/children reationship of B and A, and makes whole explanation useless. – Dendritic

Not really, B and A can be simblings (just like illustrated on the fiddle) Obviously, having a parent/child relationship would make things even easier to understand in that case, but what you had in the question and what I tried to explain was the relationship of two children elements each in a different sibling element. – Bally

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

Dendritic