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.