jquery-ui - 将 jQuery 自动完成输入的 z-index 值设置为高于结果列表本身的级别

Question

jQuery Autocomplete 小部件的默认行为是将结果列表放置在输入上方一个 z-index 级别，以便后者始终可见，但在我的情况下，这具有遮盖文本输入元素的不良影响。

我尝试在 open 方法中将 z-index 值输入元素设置为至少比结果列表高一级，但没有太大成功：

open: function () {
    setTimeout(function () {
        $(this).css('zIndex', 10000);
    }, 1);
},
close: function () {
    $(this).css('zIndex', 0);
}

输入元素的 z-index 级别确实提升为 10000，而结果列表的 z-index 级别仍保持在级别 1，但输入元素仍显示在其下方。

有没有人知道为什么会这样？结果列表和输入元素的位置属性分别设置为绝对和相对。这可能是原因吗？

Answer 1

您可以通过向样式集添加一个简单的规则来做到这一点：

#your_input {
    position: relative;
    z-index: 10000;
}
.ui-autocomplete {
     z-index: 9999 !important;
}

那应该可以完成所有工作，我在萤火虫中对其进行了测试

Answer 2

这段代码为我解决了 z-index 的问题（jQueryUI 1.8），没有任何额外的 CSS 或超时

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

Answer 3

你真的不需要摆弄z-index-

.shadow {
  -moz-box-shadow:    2px 2px 2px 1px #ccc;
  -webkit-box-shadow: 2px 2px 2px 1px #ccc;
  box-shadow:         2px 2px 2px 1px #ccc;
}

演示