1

このようなdivの1つで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;
}
4

1 に答える 1

2

.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; 
}
于 2013-08-19T00:48:06.050 に答える