z-index - z-index 不工作 css 伪之前，之后

Question

我正在尝试在这样的 div 之一中实现 css3 弯曲阴影效果。但是，我遇到了 z-index 问题。即使我将父级设置为相对位置并设置更高的 z-index 它仍然无法正常工作。伪元素显示在元素之上。这是演示我的问题的小提琴也是下面的代码。任何帮助都感激不尽。

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

remove the z-index from .app-home-body-banners: http://jsfiddle.net/7mMaT/9/

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