Question

所以我得到了这个，粗略地说：

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

这些位置使B和C重叠。

A的z-index为90，B的z-index为92，而C的z-index为91。但是C出现在B面前。我做错了什么？（如果需要更多细节，请告诉我。）

Answer 1

使用z-index仅与同一容器中的元素相关。由于B包含在A中，因此B的z-index仅在解析A内的其他元素时适用。就C而言，B和A都在z-index 90处呈现。但是如果C放在A中，则B将在前面呈现。

Answer 2

如果元素没有位置：relative / position：absolute / position：fixed style，则为position：static，这是所有元素的默认位置样式。

对于position为static的元素，z-index根本不起作用。浏览器将按xml元素的顺序呈现堆栈并忽略z-index属性。

对于这样的情况，你必须添加位置：相对于所有3个元素，A，B，C。