html - z-index 的行为不像我预期的那样

Question

所以我有这个，大致：

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

它们的位置使 B 和 C 重叠。

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

score 11 · Accepted Answer

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

score 1 · Accepted Answer

如果一个元素没有 position:relative / position:absolute / position:fixed 样式，则它的 position:static 是所有元素的默认位置样式。

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

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

2 回答 2