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?

Answer 1

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.

Answer 2

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

Answer 3

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