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

z-index css
Tophers picture Tophers · Mar 31, 2011 · Viewed 36.3k times · Source

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

biggles picture biggles · Mar 31, 2011

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.

Related questions

z-index not working with fixed positioning

I have a div with default positioning (i.e. position:static) and a div with a fixed position. If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element. Or …

Read More
Bring element to front using CSS

I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails. Here's example-

Read More
Minimum and maximum value of z-index?

I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor. I have tried all values for z-index from 0 …

Read More