z-index 在之前、之后无法使用 css pseudo

Question

我正在尝试在其中一个 div 中实现 css3 flex 阴影效果，例如 this 。但是，我遇到了 z-index 问题。即使我将 parent 设置为相对位置并设置更高的 z-index 它仍然无法正常工作。伪元素显示在元素之上。这是 Fiddle 下面的代码也证明了我的问题。任何帮助将不胜感激。

HTML

<div class="app-home-body-banners">
    <div>
        <ul style="height: 100px">
        </ul>
        <br class="clear" />
    </div>
</div>

CSS

.app-home-body-banners
{
    position: relative;
    z-index: 100;
    margin: 20px 0px 20px 0px;
    background-color: #E9E9E9; 
}
.app-home-body-banners:before, .app-home-body-banners:after
{
    content:"";
    position:absolute;
    z-index:-1;
}

.app-home-body-banners:before
{
    top:0px;
    bottom:0px;
    left:10px;
    right:10px;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
    box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

.clear
{
    float: none;
    clear: both;
    line-height: 1px;
}

Answer 1

从 .app-home-body-banners 中删除 z-index:http://jsfiddle.net/7mMaT/9/

.app-home-body-banners {
    position: relative;
    margin: 20px 0px 20px 0px;
    background-color: #E9E9E9; 
}