html - 使用 z-index 在父 div 后面创建子 div？

Question

无论我尝试什么，子 div 总是在父 div 的前面。有没有办法让 child div 在 parent 的后面？ z-index 似乎不起作用。

注释:

1. 我不想更改 html

2. parent 必须有一个 z-index

3. 重复“How to make child element than parent with z-index”在语法上没有意义，难以阅读，对我没有真正帮助。

<div id='parent'>
    <div id='child'>
    </div>
</div>

#parent {
    width:50px;
    height:50px;
    background:red;
    position:absolute;  
    z-index:100;
}

#child {
    width:50px;
    height:50px;
    background:blue;
    position:absolute;  
    z-index:-100;
}

JSFiddle

Answer 1

不要让 child div 实际上包含在 parent 中。由于位置是绝对的，您可以这样做:

<div id='parent'>
</div>
<div id='child'>
</div>

现在，如果 parent 的 z-index 小于 child 的 z-index，它将出现在顶部。