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/

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.