Html 正确显示自动完成下拉列表时出现的问题

我已经在reactjs中实现了自动完成功能，但是当我输入一些输入时，下拉列表即自动完成建议会显示在卡片后面。实际上，它应该显示在正面，但当前卡与下拉列表重叠。我怎样才能把它移到前面？（为了更好地理解，请参见屏幕截图）

代码：

render（）{
常数{
一旦改变，
onClick，
onKeyDown，
声明：{
积极的建议,，
过滤建议，
建议,，
搜索
}
}=这个；
让SuggestionListComponent；
如果（显示建议和搜索（&S）{
if（filteredSuggestions.length）{
SuggestionListComponent=(

{filteredSuggestions.map（（建议，索引）=>{
让类名；
//用类标记活动建议
如果（索引===activeSuggestion）{
className=“建议活动”；
}
返回(

{建议}

);
})}

);
}否则{
SuggestionListComponent=(
没有建议，你只能靠自己了！
);
}
}
返回(
{SuggestionListComponent}
{this.state.projects.map（（val，index）=>(
))}
)
}
}

我试着把它移到一个容器液体的容器里，但不起作用

截图：

---

正如托尼·米歇尔·考贝特在评论中所说。您需要将

z-index:1

添加到父容器中。因为您希望在卡片前面显示搜索建议，所以将z-index:1添加到customsearch类中

代码：

---

正如托尼·米歇尔·考贝在评论中所说的那样。您需要将

z-index:1

添加到父容器中。因为您希望在卡片前面显示搜索建议，所以将z-index:1添加到customsearch类中

代码：

---

您只需要对自动完成容器应用比其他容器更高的z索引container@ToniMichelCaubet所以我应该添加

z-index:-1在header className中是否正确？我显示的下拉列表如下->
{SuggestionListComponent}
在header类中，卡片显示在container fluid类中。您只需对autocomplete容器应用比其他容器更高的z索引container@ToniMichelCaubet所以我应该添加
z-index:-1在header className中是否正确？我显示的下拉列表如下->
{SuggestionListComponent}
在header类中，卡片显示在container fluid类中
    render() {

        const {
          onChange,
          onClick,
          onKeyDown,
          state: {
            activeSuggestion,
            filteredSuggestions,
            showSuggestions,
            search
          }
        } = this;

        let suggestionsListComponent;

        if (showSuggestions && search) {
          if (filteredSuggestions.length) {
            suggestionsListComponent = (
              <ul className="suggestions">
                {filteredSuggestions.map((suggestion, index) => {
                  let className;

                  // Flag the active suggestion with a class
                  if (index === activeSuggestion) {
                    className = "suggestion-active";
                  }

                  return (
                    <li
                      className={className}
                      key={suggestion}
                      onClick={onClick}
                    >
                      {suggestion}
                    </li>
                  );
                })}
              </ul>
            );
          } else {
            suggestionsListComponent = (
              <div className="no-suggestions">
                <em>No suggestions, you're on your own!</em>
              </div>
            );
          }
        }

    return (
      <div>
          <div className="header">
            <div className="md-form mt-0 customsearch">
                <input className="form-control" type="text" placeholder="Search projects" aria-label="Search"
                value={this.state.search}
                onChange={this.searchTermChanged} 
                />
                {suggestionsListComponent}
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              {this.state.projects.map((val,index) => (
                <div class="col-3">
                  <Card title={val.title} by={val.by} blurb={val.blurb} 
                  url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                </div>
              ))}
            </div>
          </div>
      </div>
    )
  }
}

.customsearch {
    z-index: 1;
}