title: jQueryUI autocomplete hidden behind modal
body: <p><a href="http://i.imgur.com/6H82iaI.png" rel="nofollow">Here</a>'s an image of where the modal is and how it's not appearing. How do I fix it?</p>
  
  <p><strong>OP</strong></p>
  
  <p>I'm using a jQuery UI modal essentially the same as <a href="http://api.jqueryui.com/autocomplete/#entry-examples" rel="nofollow">this</a>. When I open my page and click to open a modal for registration, I'm greeted with a textbox which should auto-complete. When I put in part of a matching string, nothing appears. However, if I press the up or down arrows on my keyboard, it will scroll through matches. This leads me to believe it's hidden behind the modal.</p>
  
  <p>The modal in question looks like:</p>
  
  <pre><code>&lt;div class="remodal" data-remodal-id="modal2"&gt;
        &lt;div class="logot"&gt;
          &lt;div class="favicon"&gt;&lt;img src="{% static 'img/favicon.png' %}" /&gt;&lt;/div&gt;
          &lt;h1&gt;Complete the form to build your profile&lt;/h1&gt;
          &lt;div class="logot-iner"&gt;
            &lt;form&gt;
            &lt;p&gt;
              My name is &amp;nbsp;&amp;nbsp;
              &lt;input id="firstname" type="text" placeholder="first name" /&gt;
              &amp;nbsp;&amp;nbsp;
              &lt;input id="lastname" type="text" placeholder="last name" /&gt;
              and I am a  &amp;nbsp;&amp;nbsp;&lt;span class="type"&gt;
              &lt;select id="studenttype"&gt;
                &lt;option&gt;Full Time&lt;/option&gt;
                &lt;option&gt;Part Time&lt;/option&gt;
              &lt;/select&gt;
              &lt;/span&gt; &amp;nbsp;&amp;nbsp; student
              &lt;br /&gt;
              &lt;br /&gt;
              I am completing a  &amp;nbsp;&amp;nbsp; &lt;span class="type"&gt;
              &lt;select id="degreetype"&gt;
                &lt;option&gt;Bachelors&lt;/option&gt;
                &lt;option&gt;Masters&lt;/option&gt;
                &lt;option&gt;Postgraduate&lt;/option&gt;
              &lt;/select&gt;
              &lt;/span&gt; &amp;nbsp;&amp;nbsp; degree at&lt;br /&gt;
              &lt;span class="type1"&gt;
              &lt;input id="university" type="text" placeholder="uni/college" /&gt;
              &lt;/span&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              I study/studied &amp;nbsp;&amp;nbsp; &lt;span class="type2"&gt;
              &lt;input id="degree" type="text" placeholder="degree subject" /&gt;
              &lt;/span&gt; &amp;nbsp;&amp;nbsp;and I
              am currently in my &amp;nbsp;&amp;nbsp;&lt;span class="type"&gt;
              &lt;select id="year"&gt;
                &lt;option&gt;First&lt;/option&gt;
                &lt;option&gt;Second&lt;/option&gt;
                &lt;option&gt;Third&lt;/option&gt;
                &lt;option&gt;Fourth or higher&lt;/option&gt;
              &lt;/select&gt;
              &lt;/span&gt; &amp;nbsp;&amp;nbsp; year.
              &lt;br /&gt;
              &lt;br /&gt;
              DOB: &amp;nbsp;&amp;nbsp; &lt;span class="type3"&gt;&lt;input id="dobday" type="text" placeholder="DD" /&gt;&lt;/span&gt;&amp;nbsp;&amp;nbsp;
               &lt;span class="type3"&gt;&lt;input id="dobmonth" type="text" placeholder="MM" /&gt;&lt;/span&gt; &amp;nbsp;&amp;nbsp;
                &lt;span class="type3"&gt;&lt;input id="dobyear" type="text" placeholder="YYYY" /&gt;&lt;/span&gt; &amp;nbsp;&amp;nbsp;
              &lt;br /&gt;
              &lt;br /&gt;
              My primary skill area is &amp;nbsp;&amp;nbsp; &lt;span class="type"&gt;
              &lt;input id="skill" type="text" placeholder="skill area" /&gt;.
              &lt;/span&gt; &amp;nbsp;&amp;nbsp;&lt;br /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
                My email is &lt;span class="type"&gt;
              &lt;input id="email" type="text" placeholder="email" /&gt; and my password is &lt;span class="type"&gt;
              &lt;input id="password" type="password" placeholder="password" /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
              &lt;a href="" id="regpost"&gt;Register&lt;/a&gt;
            &lt;/p&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>but the relevant part is </p>
  
  <pre><code>&lt;input id="university" type="text" placeholder="uni/college" /&gt;
  </code></pre>
  
  <p>The accompanying JS is</p>
  
  <pre><code>var fakedata = ['harvard','yale','test3','test4','uni'];
  /* PICK UNI AUTOCOMPLETE */
  $('input#university').autocomplete({
      source: fakedata
  });
  </code></pre>
  
  <p>I'm guessing I need to set the z-index on something but I don't know the name of what to set it on. Any ideas?</p>