我有一个JQuery自动完成搜索框,当在下拉窗口中显示搜索结果时,它出现在直接位于其下方的JQuery下拉菜单后面(见图像)。我尝试增加CSS中所有可找到的自动完成搜索内容的z-index值,但仍不能解决问题。我还应该尝试什么?
Fiddle链接:http://jsfiddle.net/tonyyeb/LKDBh/18/
Fiddle链接:http://jsfiddle.net/tonyyeb/LKDBh/18/
感谢大家的贡献。我后来找到了一个论坛用户给我的解决方案:
自动完成包装器由jQuery库(硬编码)给出z-index为1,而菜单(通过CSS)具有z-index为100; 最简单的解决方法是使用-
.ui-autocomplete {
z-index: 100 !important;
}
我最近在一个网站上遇到了类似的问题,我用以下方法解决了这个问题:
确保你将两个元素都设置为绝对定位或相对定位(z-index只在使用'position' CSS属性时起作用。所以你应该使用position: absolute; 或者 position: relative;。这完全取决于你的代码/CSS。如果你现在没有使用position属性,那么你可能应该使用position: relative;属性,因为position: absolute;会将参考元素绝对定位,这可能会破坏你的布局)。
然后确保给下拉菜单设置一个比菜单更低的z-index值。
示例:
.search-dropdown{
position: relative; or position: absolute;
z-index: 1;
}
.jquery-menu{
position: relative; or position: absolute;
z-index: 2;
}
现在,你已经添加了
position: relative;
z-index: 1;
将 .ui-widget 从这里移除,并直接添加到当你在输入框中输入内容时出现的下拉菜单的 CSS 中(在 Chrome/Firefox 上:右键点击下拉菜单并检查元素以查看其类名/ID)。
希望这对你有所帮助!
.pac-container { position: absolute; cursor: default;z-index:3000 !important;}