jQueryUI autocomplete hidden behind modal
<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>