z-index not behaving as i'd expect

Question

so i've got this, roughly:

<div id="A">
    <ul>
        <li id="B">foo</li>
    </ul>
</div>
<div id="C">
    ...
</div>

These are positioned so that B and C overlap.

A has a z-index of 90, B has a z-index of 92, and C has a z-index of 91. But C shows up in front of B. What am i doing wrong? (Let me know if more detail is necessary.)

Answer 1

Using z-index is only relevant for elements in the same container. Since B is contained inside A, B's z-index will only apply when resolving other elements inside A. As far as C is concerned, both B and A are rendered at z-index 90. However if C is placed inside A, then B will render in front.

Answer 2

If an element has no position:relative / position:absolute / position:fixed style, it's position:static which is the default position style for all elements.

With an element who is position:static, z-index simply doesn't work. The browser would render the stack in the order of xml element and ignore z-index property.

For a situation like this to work, you have to add position:relative to all 3 elements, A, B, C.

To understand more about z-index and CSS stacking, head to here: http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp