嵌套的 z-index 未按预期工作 [重复]

Question

为什么红色元素不排在蓝色元素后面？这对我来说没有多大意义。我试过制作红色元素z-index: -1，但这不起作用。

http://jsfiddle.net/dmcgrew/6cY84/

Answer 1

红色元素是蓝色元素的子元素，所以它总是在前面。如果您进行此细微更改，您的样式将起作用：

<div class="parent"></div>
<div class="child">child</div>

现在这两个 div 处于“同一级别”，红色的 z-index 变得有意义，而在您的代码中却没有。