jquery - 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>

咖啡脚本：

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

Answer 1

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

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