jQuery 自动完成结果框被其他元素覆盖

Question

我有一个 jQuery 自动完成框，下面有相对和绝对放置的元素。当结果框打开时，结果框被其下方的元素覆盖。下拉框下方元素的 z-index 小于 10。

我想不出结果框或结果项的名称来设置更高的 z-index。

有点像

#autocomplete_results{
    z-index: 20
}

我的 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

如果你使用绝对定位元素，你需要设置父元素的 z-index，在这种情况下，如果你使用 jQuery UI，它是 .ui-autocomplete 的父元素

然后您需要将您想要的元素设置为 z-index:-1 以确保它们出现在自动完成菜单下方