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

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