Question

我正在尝试在 this 之类的div中实现css3曲线阴影效果。但是，我遇到了z-index问题。即使我将父级设置为位置相对并设置更高的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：http://jsfiddle.net/7mMaT/9/

中删除z-index

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

z-index之前没有工作css伪，之后

1 个答案: