问题
SOLVED: Ended up being that the Z-index of the task editor div was being set higher than the autocomplete when the div was appended to the body. Now I just feel silly spending two hours with this.
I am currently modifying a jQuery Gantt Chart plugin (here is a link to the original plugin demo http://gantt.twproject.com/distrib/gantt.html). And I am trying to change the task editing by adding an auto-complete to the resource rows so that it is easy to grab an employee from my company.
The autocomplete is working properly and displays infront of the created full edit div for the first time using the following CSS:
.ui-autocomplete
{
position:relative;
cursor:default;
z-index:9999 !important;
}
(I have used both relative and absolute positioning both yielding the same result)
If I keep adding resources to the first open edit div, the autocompletes continue to work properly. But after I save the changes and open up another edit div the autocomplete goes back to displaying behind the edit div.
It only appears to happen once I have made one text field an autocomplete. Then after that the remaining ones are hidden behind the task editor div.
I have been looking around for anyone else who has had the problem, but I haven't found any other posts about this.
回答1:
Please add the following style to your CSS file. It worked for me and hope it will also work for you.
.pac-container {
z-index: 1051 !important;
}
来源：https://stackoverflow.com/questions/16676217/jquery-autocomplete-displaying-behind-elements-after-first-use