javascript - JQuery autocomplete appears behind JQuery menu - Stack Overflow

admin管理员组

文章数量:1324822

I have a JQuery autoplete search box which when displaying the search results in the dropdown window appears behind a JQuery dropdown menu directly below it (see image). I have tried increasing the z-index value of everything I can find in the CSS for the autoplete search but it still doesn't fix the problem. What else should I be trying?

Fiddle link: /

I have a JQuery autoplete search box which when displaying the search results in the dropdown window appears behind a JQuery dropdown menu directly below it (see image). I have tried increasing the z-index value of everything I can find in the CSS for the autoplete search but it still doesn't fix the problem. What else should I be trying?

Fiddle link: http://jsfiddle/tonyyeb/LKDBh/18/

• javascript
• jquery
• html
• css
• jquery-ui-autoplete

Share Improve this question Follow edited Feb 8, 2017 at 14:50 CommunityBot 111 silver badge asked Jan 16, 2014 at 9:09 tonyyebtonyyeb 71955 gold badges1313 silver badges3232 bronze badges 4

• Is it the jQuery UI menu? – Salman Arshad Commented Jan 16, 2014 at 9:10
• The menu was obtained from here a while ago (I'm not using the latest version) dynamicdrive./dynamicindex1/ddsmoothmenu.htm – tonyyeb Commented Jan 16, 2014 at 9:13
• 1 It is difficult to answer without looking at the "generated" markup. Can you create a fiddle? – Salman Arshad Commented Jan 16, 2014 at 9:14
• Or at least if you can provide a link to your website. – Dragos Rizescu Commented Jan 16, 2014 at 9:17

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

Thanks for everyone's contributions. I have since found a solution given to me by a forum user:

The autoplete wrapper is being given a z-index of 1 by the jQuery library (hard-coded), >whereas the menu (via CSS) has a z-index of 100; easiest solution is to use -

.ui-autoplete { z-index: 100 !important; }

I had a similar issue with a website recently and I've fixed this with the following method:

Make sure that you position both elements absolute OR relative (z-index only works when you use the 'position' css element. So you should either use position: absolute; or postion: relative;. That totally depends on your code/css. When you don't use the position element right now, you should probably use the position: relative; element since the position:absolute; element will position the referring element absolutely which will probably screw up your layout).

Then make sure you give the dropdown a z-index which is lower then the z-index for the menu.

Example

.search-dropdown{
  position: relative; or position: absolute;
  z-index: 1;
}

.jquery-menu{
  position: relative; or position: absolute;
  z-index: 2;
}

Now, you've added

position: relative;
z-index: 1;

to .ui-widget.

Remove it there and add it directly to the dropdown's css which appears when you enter something in the input field (Chrome/Firefox: Right Click on the dropdown and inspect element to see its class/ID).

Hope this helps!

A few months ago I had a similar problem, and searched the web.

The solution was in the CSS styling.

I added an inline class (ui-front) to the element that holds the autoplete input element.

Not sure it will solve your problem, but it's an easy experiment.

Best of luck!

Question has been posted long time ago. Still, i also have a solution that works and not listed till now . just add this on top of your page and problem should be solved.

.pac-container { position: absolute; cursor: default;z-index:3000 !important;}

本文标签： javascriptJQuery autocomplete appears behind JQuery menuStack Overflow