CODEWITHSUNDEEP
z-indexcsspseudo-element
nicholasnet
nicholasnet

Reputation: 2277

z-index not working css pseudo before, after

I am trying to achieve css3 curved shadow effect in one of the div something like this. However, I ran into z-index problem. Even-though I set parent as position relative and set higher z-index it is still not working. Pseudo elements shows up on top of element. Here is the Fiddle that demonstrates my problem also the code below. Any help will be much appreciated.

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;
}

Upvotes: 1

Views: 5425

Answers (1)

user1655416
user1655416

Reputation: 21

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; 
}

Upvotes: 2

Related Questions