隐藏在屏幕后的建议框答案

【问题标题】：Suggestion box hiding behind the screen隐藏在屏幕后的建议框
【发布时间】：2014-02-19 06:42:17
【问题描述】：

在我的项目中，有一个自动完成搜索文本框。每当用户输入内容时，建议框就会出现在文本框下方。这个建议框隐藏在屏幕后面。

我试图通过应用尽可能大的z-index 来领先，但仍然没有用。

我提供我的站点链接是因为 jsfiddle 工作正常。

出于测试目的，在文本框中输入co 并查看建议框的可见性。

【问题讨论】：

【解决方案1】：

您的 .edgefxContentContainer 包含 12 的 z-index。这显示了一些建议框部分。建议你搜索z-index并调试一下

【讨论】：

另外，.edgefxHeader 的 z-index 为 10。去掉它似乎可以解决问题。
这并没有回答我的问题，而是@ChadHedgcock 的建议对我有用.. 无论如何，感谢你们两个:)
@ChadHedgcock 我仍然很困惑为什么子容器依赖于父容器之一的z-index 值，即edgefxHeader。你有什么想法吗？
@Mr_Green 这就是 z-index 的工作原理。如果我有一个
，你应该看看这个，因为 child 的 z-index 是 10.1（不是 1），所以孩子永远不会出现在父母面前。看到这篇文章，z-index 帮了我很多philipwalton.com/articles/what-no-one-told-you-about-z-index
@garethb 非常感谢 :)

【解决方案2】：

搜索这段代码，把12改成9..解决问题

.edgefxContentContainer {
top: -16px;
z-index: 9;
}

改变这个 div 类的样式：

<div class="edgefxContentContainer pRelative">

【讨论】：