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

Question

jQuery Autocomplete小部件的默认行为是将结果列表定位在输入上方一个z索引级别，以便后者始终可见，但在我的情况下，这会使文本输入元素黯然失色。

我试图从开放方法中将z索引值输入元素设置为比结果列表至少高一级，但没有太大成功：

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

输入元素的z索引级别确实提升到了10000，而结果列表的z索引仍然保持在级别1，但输入元素仍然出现在它下面

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

Answer 1

您可以通过在styleseet:中添加一个简单的规则来实现

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

这应该可以完成所有的工作，我在firebug 中测试了它

Answer 2

这段代码为我解决了z索引（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;
}

演示