css - Shadow not showing up

Question

I am trying to place shadows in one of the div and it's not showing up. Here is one div where I am trying to implement the shadow:

#intro {
    padding: 0px;
    margin: 0px auto;
    width: 100%;
    float:inherit;
    overflow: hidden;
    height: 800px;
    position:inherit;
    background-color: #00b3e1;; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

Here is the URL: http://rachelchaikof.com/awareness/

question from:https://stackoverflow.com/questions/13772427/shadow-not-showing-up

Answer 1

The reason you can't see the shadow is because the next div (#one) is directly below it, and the shadow is rendering beneath #one. Remove the background image from #one and the shadow becomes visible.

Add this to #intro's CSS to make the shadow visible:

position: relative;
z-index: 10;

If you want shadows visible on the other text areas, you'll need to adjust their z-index values as well, with the top element (#intro) having the highest value.