jQuery-UI的自动完成显示不好，z-index问题

我目前正在我的客户网店中实现jQuery UI的自动完成function。问题是：自动完成所在的元素具有较高的z-index，然后是自动完成的z-index。我尝试手动设置自动完成z-index，但我有一种感觉，jQuery UI覆盖了这一点。

其实我的问题是一个自动完成build议列表错误z-index的重复，我怎么能改变？，但由于没有答案，我想再次尝试。

任何帮助，欢迎！

马亭

为什么不使用z-index和！important ？

 .ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}

在search时，我发现了这个主题（http://forum.jquery.com/topic/alternating-style-on-autocomplete）。; 显然，改变自动填充框的风格的唯一方法是通过javascript来实现：

  open: function(){ $(this).autocomplete('widget').css('z-index', 100); return false; },

更改父Div的z-index，自动完成菜单将具有div的z-index + 1

试试这个，你可以在运行时或初始化时操纵z-index

 $('#autocomplete').autocomplete({ open: function(){ setTimeout(function () { $('.ui-autocomplete').css('z-index', 99999999999999); }, 0); } });

在jQuery UI的CSS中：

 .ui-front { z-index: 9999; }

如果您能够在自动完成文本input时执行更高的Z-index，那么这是解决您的问题的方法。

jQuery UI自动完成选项列表通过获取正在附加的文本input的z索引来计算其z-索引值，并将该值加1。

因此，您可以为文本input提供999的z索引，自动完成将具有1000的z索引值

 <input type="text" class="autocomplete" style="z-index:999;" name="foo">

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

尝试一下在你的CSS（在脚本加载之前），而不是在萤火虫：

 .ui-selectmenu-menu { z-index:100; }

在我的情况下，这个工程，并创buildz索引像100x（例如1002）

也看看你在哪里附加项目。当我将自动完成追加到内部div时，我遇到了这个问题，但是当我将自动完成附加到body标签时，问题就消失了。

添加以下内容

 .ui-autocomplete { z-index:100 !important; }

在jquery-custom-ui.css文件中（或者如果你正在使用缩小的文件）。

对于那些仍然使用这个插件的开发者。尝试这个：

 .acResults { z-index:1; }

对于我来说z-index就足够了：1，在你的情况下设置你需要的值。