Question

我正在一个reactjs项目中，我必须将搜索栏自动完成数据与结果div重叠，该结果就在它下面。请参考图片以了解详细信息。

场景-当用户点击搜索栏中的自动完成建议时，他会在结果div中获得结果。

我无法在结果div（重叠）上方填充自动填充数据。我该如何实现？

以下是我使用的div和CSS代码：

.logout {
  float: right;
  margin: 0px 0px;
}

.logoutautocomplete {
  float: right;
  margin: 0px 0px;
  z-index: 10000;
  display: inline;
}


/* Split the screen in half */

.split {
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 165px;
  padding-top: 20px;
}


/* Control the left side */

.left {
  left: 0;
}


/* Control the right side */

.right {
  right: 0;
}

body {
  background: #ccc
}

.box h3 {
  text-align: center;
  position: relative;
  top: 80px;
}

.box {
  width: 70%;
  height: 200px;
  background: #FFF;
  margin: 40px auto;
}


/*==================================================
 * Effect 1
 * ===============================================*/

.effect1 {
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}


/*===================================*/

div.Cl {
  width: 500px;
  height: 50px;
  margin: auto;
  border: 3px solid #73AD21;
  display: inline;
  color: #4AA45D;
  border-radius: 10px;
}

div.In {
  width: 500px;
  height: 50px;
  margin: auto;
  border: 3px solid #FFEAAA;
  display: inline;
  color: #665214;
  border-radius: 10px;
}

div.Op {
  width: 500px;
  height: 50px;
  margin: auto;
  border: 3px solid #B0E0E6;
  display: inline;
  color: #5F7893;
  border-radius: 10px;
}

div.Su {
  width: 500px;
  height: 50px;
  margin: auto;
  border: 3px solid #E8EBF0;
  display: inline;
  color: #A6B4C3;
  border-radius: 10px;
}

div.V {
  width: 500px;
  height: 50px;
  margin: auto;
  border: 3px solid #FFEAAA;
  display: inline;
  color: #665214;
  border-radius: 10px;
}

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.menuInput {
  background-color: white;
  box-sizing: border-box;
  color: rgba(51, 51, 51, 0.8);
  cursor: pointer;
  display: block;
  position: relative;
  padding: 8px 10px;
  z-index: 1;
}

<div>
  {this.state.render &&

  <Modal isOpen={this.state.modalIsOpen} onRequestClose={this.closeModal} contentLabel="Example Modal">
    <button onClick={this.closeModal}>close</button>
    <EditIteration iteratoinid={this.state.uniqueid} iteratoinname={this.state.edititerationname} iterationstart={this.state.editstartdate} iteratoinend={this.state.editenddate}/>
  </Modal>


  }

  <div className="row" id="Body">
    <div className="medium-12 columns">
      <a href="#" onClick={this.logout} className="logout">
            Logout
          </a>
      <div className="logoutautocomplete">


      </div>

      <input type="submit" className="button success" value="Add Iteration" onClick={this.CreateIteration} /> {this.state.showComponentCreate ? (
      <Redirect to={ "/createIteration"} /> ) : null}
    </div>
    <div class="split left">
      <UserFeed feedData={this.state.data} deleteFeed={this.deleteFeed} convertTime={this.convertTime} name={this.state.name} editFeed={this.editFeed} showJira={this.showJira} editfeed={this.editfeed} />
    </div>
    <div class="split right">

      <Autocomplete classNames={{ autocompleteContainer: "ac-container" }} value={this.state.value} inputProps={{ id: "states-autocomplete" }} wrapperStyle={{ position: "relative", display: "inline-block" }} items={getStocks()} getItemValue={item=> item.name} shouldItemRender={matchStocks} onChange={(event, value) => this.setState({ value })} onSelect={value => this.setState({ value })} renderMenu={children =>
        <div className="menuInput">{children}</div>} renderItem={(item, isHighlighted) => (
        <div className={`item ${ isHighlighted ? "item-highlighted" : "" }`} key={item.abbr}>
          {item.name}
        </div>
        )} />
        <div className="people-you-might-know">
          <div className="row add-people-section-2">
            <div className="small-12 medium-10 columns about-people">
              <div className="about-people-author">

                {/* cdoe to get jira details*/}

                <div>
                  {this.state.loading} {this.state.jiradata.map((rowdata, i) => (
                  <div>
                    <div style={{ display: "inline" }}>
                      <b>MainJiraKey</b> : {rowdata.jirakey} Status:
                      <div class={`${rowdata.jirastatus.substring(0, 2)}`}>
                        {rowdata.jirastatus}
                      </div>
                    </div>
                    {typeof rowdata.subjira == "object" ? (
                    <div>
                      {rowdata.subjira.map((subrowdata, k) => (
                      <div style={{ paddingLeft: "50px", lineHeight: "40px" }}>
                        <div style={{ display: "inline" }}>
                          <b>SubJiraKey</b> : {subrowdata.JiraKey}{" "} Status:{" "}
                          <div class={`${subrowdata.Status.substring( 0, 2 )}`}>
                            {subrowdata.Status}
                          </div>
                        </div>
                      </div>
                      ))}
                    </div>
                    ) : null}
                  </div>
                  ))}
                </div>

                <br /> {/*
                <TimeAgo date={this.props.convertTime(feedData.created)} /> */}

              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

Answer 1

很难从代码中判断出您的问题是什么，但这听起来像是z-index问题。

z-index仅适用于已定位的元素（位置：绝对，位置：相对或位置：固定）。

您要堆叠在顶部的.logoutautocomplete元素吗？如果是这样，则看起来您没有将其定位。试试：

.logoutautocomplete {
  float: right;
  margin: 0;
  z-index: 2;
  position: relative;
}

此外，您永远不需要如此高的z-index值。它只需要高于要在上面堆叠的元素即可。

如何重叠两个div并确保按钮单击有效

1 个答案: