title: Autocomplete list on top of fixed navbar
body: <p>In order to make a fixed <code>navbar</code> containing a search <code>&lt;input&gt;</code> element that is querying Google location API to get a list of address I did this:</p>
  <pre><code>&lt;nav id=&quot;inforisq-navbar&quot; class=&quot;navbar navbar-fixed-top&quot;&gt;
      &lt;div id=&quot;menu-inforisq&quot; class=&quot;container&quot;&gt;
          &lt;div class=&quot;navbar-header navbar-collapse navbar-responsive-collapse collapse&quot;&gt;
              &lt;a href=&quot;/&quot; class=&quot;navbar-brand&quot;&gt;&lt;img src=&quot;/portail/images/logo_inforisq_2015.png&quot; height=&quot;40&quot;&gt;&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id=&quot;search-container&quot; class=&quot;col-md-6 col-md-offset-1 col-sm-5 col-sm-offset-1&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;input-group&quot;&gt;
                          &lt;input name=&quot;searchbar&quot; id=&quot;searchbar&quot; class=&quot;form-control ui-autocomplete-input&quot; autocomplete=&quot;on&quot; value=&quot;&quot; placeholder=&quot;Saisissez une adresse postale ou des coordonnées GPS.&quot;&gt;
                          &lt;div class=&quot;input-group-addon&quot;&gt;&lt;a id=&quot;validation&quot; onclick=&quot;validSearch();&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-search&quot;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;ul class=&quot;nav navbar-nav navbar-right hidden-xs&quot;&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot; role=&quot;button&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-bell&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot; role=&quot;button&quot;&gt;MyInforisq &lt;span class=&quot;glyphicon glyphicon-user&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;li class=&quot;dropdown&quot;&gt;
                  &lt;a aria-expanded=&quot;false&quot; aria-haspopup=&quot;true&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; class=&quot;dropdown-toggle&quot; href=&quot;#&quot; id=&quot;drop2&quot;&gt;
                      &lt;span class=&quot;glyphicon glyphicon-th-large&quot;&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul id=&quot;dropdown-services&quot; aria-labelledby=&quot;drop2&quot; class=&quot;dropdown-menu&quot;&gt;
                      &lt;li&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;glyphicon glyphicon-fire&quot;&gt;&lt;/span&gt;&lt;span class=&quot;services-class&quot;&gt;Etat des risques&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;glyphicon glyphicon-duplicate&quot;&gt;&lt;/span&gt;&lt;span class=&quot;services-class&quot;&gt;Renseignements d'urbanisme&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;glyphicon glyphicon-home&quot;&gt;&lt;/span&gt;&lt;span class=&quot;services-class&quot;&gt;Etude d'opportunité&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;glyphicon glyphicon-duplicate&quot;&gt;&lt;/span&gt;&lt;span class=&quot;services-class&quot;&gt;Valeur vénale&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;glyphicon glyphicon-home&quot;&gt;&lt;/span&gt;&lt;span class=&quot;services-class&quot;&gt;Audit de parc immobilier&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;glyphicon glyphicon-home&quot;&gt;&lt;/span&gt;&lt;span class=&quot;services-class&quot;&gt;Hypothèques&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;glyphicon glyphicon-home&quot;&gt;&lt;/span&gt;&lt;span class=&quot;services-class&quot;&gt;Plan de réseau&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;glyphicon glyphicon-euro&quot;&gt;&lt;/span&gt;&lt;span class=&quot;services-class&quot;&gt;Diagnostics immobiliers&lt;/span&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;span aria-hidden=&quot;true&quot; class=&quot;glyphicon glyphicon-euro&quot;&gt;&lt;/span&gt;&lt;span class=&quot;services-class&quot;&gt;Expertises immobilières&lt;/span&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>And here is the result :</p>
  <p><a href="https://i.stack.imgur.com/wGoo4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wGoo4.png" alt="enter image description here" /></a></p>
  <p>As you can see, the autocomplete list is behind the fixed <code>navbar</code> and I wanted to know how to put it above in css.</p>
  <p>[SOLUTION]</p>
  <p>Only have to add z-index &gt; 1030 as : <code>.pac-container{ z-index: 1031;}</code></p>