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.
Asked
Active
Viewed 8,186 times
3 Answers
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;
}
-
So how would I fix this issue? – Alex Sep 24 '10 at 21:14
-
have updated my answer to include the exact css change you need to make. – Vinay B R Sep 25 '10 at 02:49
2
I think either of these will explain the problem and give a solution:
-
That first link solves it (give a higher z-index to the *parent* of the item you want on top) – Gregg B Jun 24 '11 at 02:45
0
Give ".nav" and "content" a z-index. Make .nav higher.
Diodeus - James MacFarlane
- 112,730
- 33
- 157
- 176