title: jQuery AutoComplete displaying behind elements after first use
body: <p><strong>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.</strong> </p>
  
  <p>I am currently modifying a jQuery Gantt Chart plugin (here is a link to the original plugin demo <a href="http://gantt.twproject.com/distrib/gantt.html" rel="nofollow">http://gantt.twproject.com/distrib/gantt.html</a>). 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.</p>
  
  <p>The autocomplete is working properly and displays infront of the created full edit div for the first time using the following CSS:</p>
  
  <pre><code>    .ui-autocomplete
      {
          position:relative;
          cursor:default;
          z-index:9999 !important;
      }
  </code></pre>
  
  <p>(I have used both relative and absolute positioning both yielding the same result)</p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>I have been looking around for anyone else who has had the problem, but I haven't found any other posts about this. </p>