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

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

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

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

输入元素的z索引级别确实提升到10000，而结果列表的z索引级别仍然保持在级别1，但输入元素仍显示在其下方

有人知道为什么会这样吗？

---

结果列表和输入元素的位置属性分别设置为绝对和相对。这可能是原因吗？

您可以通过在styleseet中添加一个简单的规则来做到这一点：

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

---

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

你真的不需要摆弄

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

---

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

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

---

但是为什么呢？是否有错误重叠的内容？是的，结果列表周围的框阴影实际上是。我想保留阴影效果，但不希望它显示在输入元素的顶部。你不能偏移阴影，使其仅在右边缘和下边缘可见吗？我看到你在这里采用了亲吻原则。这很好，但我也计划垂直重叠这两个元素，然后删除输入元素的底部边框，使它们的边框无缝地合并在一起。不幸的是，这种方法在这里帮助不大。。我明白你的意思。您希望它们显示为一个无缝控件。够公平的了，这是个好主意！重要的CSS属性有效地覆盖了jQueryUI设置的z索引值，但我的JS代码已经做到了这一点。不过，感谢您提出了另一种可能更简单的方法。它可以很好地反转z索引的相对位置，但在呈现页面上，输入元素仍然显示在结果列表下面：（@Ziad，你能提供一个链接吗？我需要输入什么，才能使输入显示？@Ziad，你的css选择器有一个错误，它是

class

，而输入有

id

（将

.autocomplete

更改为

。\autocomplete

）另外，不要忘记添加

位置：relative

。这似乎是一个比覆盖css更合理的解决方案。