>>>

問題：autocomplete提示框被遮擋

最近在使用jQuery外掛fullCalendar做一個會議預約功能，新建預約時用到了jqueryUI的兩個外掛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更大的值。效果如下:

轉載於:https://my.oschina.net/bobwei/blog/1488485