父级大于子级的Z索引

Question

我有3个div：#parent，child，second

我希望#parent div位于#child div之上，而#child div位于#second div之上。 如何设置z-index或配置div以实现此目的？ 现在，#child div位于两者之上。 我宁愿不要更改HTML代码，而只需使用CSS对其进行修复。

我已经检查了其他类似的问题，但是没有一个能够为我面临的问题提供解决方案。

#parent, #child, #second{
    height: 50px;
}
#parent{
    background-color: grey;
    position: relative;
    z-index: 1;
    width: 500px;
}
#child{
    background-color: #216583;
    color: white;
    position: absolute;
    top: 50%;
    z-index: 0;
    width: 400px;
}
#second{
    background-color: #f76262;
    position: relative;
    z-index: -1;
    width: 300px;
}

<div id="parent">
    <div id="child">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, velit!</p>
    </div>
</div>
<div id="second"></div>