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

网友博客：