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，以确保它们出现在自动完成菜单下面

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

1 个答案: