jQuery自动完成出现在jQuery菜单后面

Question

我有一个JQuery自动完成搜索框，当在下拉窗口中显示搜索结果时，它出现在直接位于其下方的JQuery下拉菜单后面（见图像）。我尝试增加CSS中所有可找到的自动完成搜索内容的z-index值，但仍不能解决问题。我还应该尝试什么？

Fiddle链接：http://jsfiddle.net/tonyyeb/LKDBh/18/

- tonyyeb

---

这是jQuery UI菜单吗？ - Salman A

菜单是一段时间前从这里获取的（我没有使用最新版本）http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm - tonyyeb

没有查看“生成”的标记很难回答。你能创建一个 fiddle 吗？ - Salman A

或者至少如果您能提供您的网站链接。 - Dragos Rizescu

Answer 1

感谢大家的贡献。我后来找到了一个论坛用户给我的解决方案：

自动完成包装器由jQuery库（硬编码）给出z-index为1，而菜单（通过CSS）具有z-index为100； 最简单的解决方法是使用-

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

- tonyyeb

Answer 2

我最近在一个网站上遇到了类似的问题，我用以下方法解决了这个问题：

确保你将两个元素都设置为绝对定位或相对定位（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;
}

- SissyPants

---

抱歉，我有点困惑。在你说“position: relative; 或 position: absolute;”时，哪一个应该是哪一个？ - tonyyeb

谢谢您的澄清，但它仍然无法正常工作。如果有帮助的话，我已经添加了一个 fiddle 来展示它无法正常工作。 - tonyyeb

Answer 3

现在，你已经添加了

position: relative;
z-index: 1;

将 .ui-widget 从这里移除，并直接添加到当你在输入框中输入内容时出现的下拉菜单的 CSS 中（在 Chrome/Firefox 上：右键点击下拉菜单并检查元素以查看其类名/ID）。

希望这对你有所帮助！

- SissyPants

---

我已经尝试过了，在不同的位置添加了它（并非同时），但仍然无法正常工作。您能否查看我的 Fiddle 并尝试让它正常工作？ - tonyyeb

Answer 4

几个月前我遇到了类似的问题，然后在网上搜索。

解决方法在 CSS 样式中。

我向包含自动完成输入元素的元素添加了一个内联类（ui-front）。

不确定它是否会解决你的问题，但这是一个简单的实验。

祝你好运！

- TimSPQR

---

通用回答，您没有解释您添加了什么样式来修复问题。 - Andrea Mauro

Answer 5

问题已经发布很久了。不过，我也有一种解决方案，它可以解决问题，但迄今为止尚未列出。 只需将以下内容添加到您的页面顶部，问题应该就会得到解决。

.pac-container { position: absolute; cursor: default;z-index:3000 !important;}

- Archelese