Question

I have a jQuery autocomplete box with relatively and absolutely placed items below it. When the results box opens up, the result box is covered by the elements below it. The z-index for the items below the drop down box are less than 10.

I can’t figure out the name of the result box or result items to set a higher z-index.

Something like

#autocomplete_results{
    z-index: 20
}

my html:

<div class="normal"><input id="college" class="inputField" type="text" name="college" placeholder="College Name" data-autocomplete-source="<%= colleges_accounts_url %>"></div>

coffeescript:

jQuery ->
  $("#college").autocomplete
    source: $("#college").data('autocomplete-source'),

Answer 1

If you are using absolutely positioned elements you need to set the z-index of the parent element, in this case if you are using jQuery UI, it is the parent of .ui-autocomplete

You then need to set the elements you want underneath to z-index:-1 to ensure they appear underneath the autocomplete menu