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

Question

jQuery自动完成小部件的默认行为是将结果列表定位在输入上方的一个z-index级别,以便后者始终可见,但在我的情况下,这会使文本输入元素蒙上阴影.

我尝试将z-index值输入元素设置为比open结果列表中的结果列表至少高一级,因此没有太大的成功:

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);
}