jQuery UI中dialog 遮盖 autocomplete的问题解决

问题：autocomplete提示框被遮挡

最近在使用jQuery 插件fullCalendar做一个会议预约功能，新建预约时用到了jQuery UI的两个插件dialog和autocomplete,结果遇到了下图所示问题:autocomplete的返回item被dialog遮挡啦。

由于对css不太熟悉，摸索了良久未能解决，到处搜寻未找到方案，最后请教了前端大牛，轻松搞定，不得不服，其间又学到了一些新技能，故稍作总结，希望能帮到和我一样遇到此问题的前端小白们。

 

首先介绍一个CSS属性：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

也就是z-index属性值越大的元素会显示越上面

详细了解z-index属性，请参考W3School：

http://www.w3school.com.cn/cssref/pr_pos_z-index.asp

网友博客：http://www.uzzf.com/news/8287.html

 

解决方法：设置z-index属性

在autocomplete item上点击右键，点击弹出菜单中“审查元素”，出现如下视图：

可以看到 autocomplete 元素的z-index 是100

dialog的z-index值也是100，因为他们都引用了 ui-front类，而由于相同级别的z-index 显示顺序与文档流顺序有关，故下面的dialog元素 覆盖了上面的autocomplete 元素

找到了问题原因，解决方法自然就简单了，只需把autocomplete元素的z-index值设置大一些就行了。通过查看元素属性，我们发现autocomplete元素还具有ui-autocomplete这个类属性，于是我单独为这个类添加了z-index属性，如下：

<style>

.ui-autocomplete{

       z-index: 11111;

}

</style>

如此，autocomplete元素自动使用了这个z-index更大的值。效果如下: