'Shadow not showing up

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/

shadowcss


Solution 1:[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.

Solution 2:[2]

Another scenario which I had today. Box-shadow was not showing up in spite of setting position relative to the div. Apparently there was no content next to this div which had box shadow.

Once the content was added, box-shadow showed up.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chris Herbert
Solution 2 Pavithra Olety

Related Questions