1

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.

Kamil Sindi
  • 21,782
  • 19
  • 96
  • 120
  • Are there more than 100 elements in that element? (Just making sure.) – Ry- May 09 '11 at 01:31
  • hi minitech. there aren't more than 100 elements in the dropdown list. – Kamil Sindi May 09 '11 at 01:32
  • Not in the dropdown list, in its parent. – Ry- May 09 '11 at 01:32
  • If you are testing in IE, it has some quirks around z-indexing. http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html This bug is persistent even in IE8 (not sure about IE9). – Matthew Scharley May 09 '11 at 01:33
  • ya, there aren't 100 elements. – Kamil Sindi May 09 '11 at 01:33
  • 1
    It might help us help you if you showed some example code that reproduces your issue. – mVChr May 09 '11 at 01:36
  • If you could provide a [jsFiddle test case](http://jsfiddle.net/) or a live link to your page, I will [fix it](http://stackoverflow.com/questions/5693388/z-index-problem-in-jquery-dialog-autosuggest-list-not-displayed-properly/5693787#5693787) if it's possible. – thirtydot May 09 '11 at 01:49

1 Answers1

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.

Abhi Beckert
  • 32,787
  • 12
  • 83
  • 110
  • 1
    Which bug are you referring to, if you might ask? The only one I can find offhand is z-index for SVG content, which is clearly not the issue here. – Boris Zbarsky May 09 '11 at 02:27
  • @Boris a negative z-index will render behind the element's background color/image in some very common edge cases. The spec is clear that negative z-index is a valid value (and it works in all other browsers). I was following it in bugzilla, and supposedly it requires a lot of refactoring to fix. After a few years I stopped following the bug, receiving too many emails as more people commented. Don't know what the status is now. Since everything is 0 by default, negative z-index is a nice way to put design elements behind the page content. – Abhi Beckert May 10 '11 at 05:01
  • The negative z-index thing has been fixed since February 2006, with the fix shipping in Firefox 3.0. – Boris Zbarsky May 10 '11 at 13:44