Question

我已经在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>
    )
  }
}

我尝试将其移动到容器流体的div内，但不起作用？

屏幕截图：

Answer 1

正如Toni Michel Caubet在评论中所说。您需要将z-index: 1添加到父容器。如果您想在卡片前添加搜索建议，请在customsearch类中添加z-index：1。

代码：

.customsearch {
    z-index: 1;
}

正确显示自动完成下拉菜单时出现问题

1 个答案: