Home/ Questions/Q 4614078
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T01:38:46+00:00

Update: Thanks for all your comments. I think it is a current stacking context

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0