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

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

    

        absolute box b0
    
    

        absolute box b1
        

            popup box inside b1
        
    
    

        absolute box b2
    
    

        absolute box b3
    

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