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/

The link is broken. You should add the relevant html to your question. — The DIMM Reaper, Jun 02 '15 at 16:15

score 199 · Answer 1 · answered Dec 07 '12 at 23:16

199

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.

answered Dec 07 '12 at 23:16

Chris Herbert

6,145
3
19
31

5

position: relative did it for me. – Matt Jun 02 '16 at 19:27
1

didn't think of the z-index. Thank you! – Mugé Oct 21 '16 at 16:25
5

Excellent. I didn't need to give a z-index, relative position worked! Thank you! I had spent an hour trying to figure out the issue. – Rutwick Gangurde Feb 15 '17 at 09:44
position: relative did it for me. – Reza Mahmoodi Nov 15 '22 at 07:19

score 1 · Answer 2 · answered Feb 19 '16 at 06:38

1

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.

answered Feb 19 '16 at 06:38

Pavithra Olety

88
6

Shadow not showing up

2 Answers2