How to make z-index to work with position: relative;

Question

Update: Thanks for all your comments. I think it is a "current stacking context" issue. I will provide code tomorrow morning Easter Time if I can't get it resolved by then.

I have a problem where my autosuggest dropdown list is partially hidden because the div under it takes priority.

Been trying to figure out how to solve this with z-index . According to W3 Schools "z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)".

I've found that only if I use position: fixed; for the dropdown list does the z-indexing work. But the problem is I want to use position: relative; . I've tried doing position relative for both the dropdown list and the overlapping div and setting the z-index at +100 and 0, respectively.

Any suggestions would be much appreciated.

I'm testing it in Firefox 4 and Chrome.

Answer 1

A z-index only applies to the "current stacking context". It's likely the div overlapping div is in a different stacking context.

It is also possible you are doing it right, but FireFox has bugs. I'm aware of at least one long-standing bug where FireFox is not standards-compliant with regards to z-index. Perhaps try in a WebKit based browser.

You haven't posted the HTML/CSS your'e working with, so I can't get any more specific than that. Please post your code and I'll update my answer to be more specific.

The z-index property is defined here: http://www.w3.org/TR/CSS2/visuren.html#z-index w3schools.com is not the best source for info like this.