2

I have created this css3 dropdown menu that appears behind the image when I mouse over the dropdown menu, and I have tried to figure it out. But cant for the life of me. Any help is greatly appeciated you can take a look at it here.

3 Answers 3

8

Quoting from this thread

Z-index is not an absolute measurement. It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts.

When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto (meaning your entire document should be a single stacking context), you did construct a positioned span: apparently IE interprets this as a new stacking context.

UPDATE-

Add the following css to you page

#header
{
    position:relative;
    z-index: 2;
}
#content-wrap
{
    position:relative;
}
2
  • So how would I fix this issue?
    – Alex
    Sep 24, 2010 at 21:14
  • have updated my answer to include the exact css change you need to make.
    – Vinay B R
    Sep 25, 2010 at 2:49
2

I think either of these will explain the problem and give a solution:

1
  • That first link solves it (give a higher z-index to the parent of the item you want on top)
    – Gregg B
    Jun 24, 2011 at 2:45
0

Give ".nav" and "content" a z-index. Make .nav higher.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.