CSS box-shadow hidden (z-index does not fix)

Question

I have a box-shadow on my #primaryNav div. Unfortunately, the shadow is being covered/hidden by the background of the following #page element.

I tried to set a z-index of 100 to #primaryNav and a z-index of -100 to #page, but that does not fix my problem.

Any ideas what I'm doing wrong?

Where should this shadow be, on the top or bottom of the nav? — Gary Green, Mar 31 '11 at 19:27

score 121 · Answer 1 · edited Nov 13 '13 at 12:15

121

You need to define positioning for #primaryNav. Z-index only affects positioned elements. I just added this in firebug and it fixed:

#primaryNav {
  position: relative;
 }

I would avoid using a negative z-index. Simply change z-index of #page to 0.

edited Nov 13 '13 at 12:15

Ajinkya

22,324
33
110
161

answered Mar 31 '11 at 21:58

biggles

3,021
5
27
36

5

Perfect. Didn't know that about z-index & positioned elements. Thanks so much. – Tophers Mar 31 '11 at 23:02
3

this is the correct answer. OP should mark it accordingly – Mansiemans Feb 27 '14 at 14:10
1

This is brilliant, ive known about z-index but you are the first person that I have come across that has explained that positioning is required for it to work, thank you so much! – Kenziiee Flavius Apr 04 '16 at 22:59
Thank you man. This worked like a charm and you fulled a gap in my knowledge. – noobcoderiam May 25 '19 at 16:55

Kuepper · Answer 2 · 2015-08-20T12:50:35.380

3

As jlego already said a relative position should fix it. By the way I would suggest ensuring that there is no shadow left or right of the #primaryNav. Since #primaryNav has a width of 100% a shadow on the side makes a horizontal scrollbar appear.

For fixing this you could set a overflow:hidden to #iframe

edited Aug 20 '15 at 12:50

answered Mar 31 '11 at 22:14

Kuepper

992
13
39

score 0 · Answer 3 · edited Nov 13 '13 at 12:16

0

I took a look at your site and I think the border-bottom property of #primaryNav is covering up your shadow.

edited Nov 13 '13 at 12:16

Ajinkya

22,324
33
110
161

answered Mar 31 '11 at 19:25

njebert

534
4
14

CSS box-shadow hidden (z-index does not fix)

3 Answers3

Linked