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

我在ReactJS中实现了自动完成功能,但是当我输入一些输入时,下拉列表即自动完成建议会显示在卡片后面。实际上,它应该显示在前面,但当前卡与下拉列表重叠。我怎样才能把它移到前面?(请参阅屏幕截图以获得更好的理解)

代码:

    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>
    )
  }
}

我试着把它放在容器里,但它不起作用?

截图: