React中Autocomplete组件z-index不生效问题求助

我来帮你搞定这个自动补全列表被表格挡住的问题！你遇到的z-index无效问题，大概率是因为堆叠上下文和元素定位的设置不对，咱们一步步来修复：

核心问题分析 #

z-index 只有在元素设置了 position: relative/absolute/fixed/sticky（非static默认值）时才会生效，而且会受父元素的堆叠上下文影响。你之前只单独设置了z-index，但没有给自动补全的容器和列表设置正确的定位，导致列表无法突破当前的文档流层级，自然盖不住表格。

具体修复步骤 #

1. 给自动补全容器设置相对定位
   给.autocomplete容器添加position: relative，这样它会创建一个独立的堆叠上下文，里面的子元素z-index才能和外部元素正常比较层级。
2. 给自动补全列表设置绝对定位
   把<ul>设置为position: absolute，让它脱离文档流，这样就能覆盖在表格上方；同时补充宽度、背景色等样式，保证列表显示完整且不透明。
3. 移除表格的z-index: -1
   这个设置不仅没必要，反而可能导致其他元素的层级出现异常，直接删掉即可。

修改后的代码片段 #

render() { 
  const list = this.state.items.map((item) => 
    <li key={item._id} style={{padding: '8px', cursor: 'pointer', margin: 0}}>{item.itemname}</li>
  ); 
  return ( 
    <div className="Receivings"> 
      <h1>Receivings</h1> 
      <hr /> 
      <Row> 
        <Col xs={8} sm={4} md={3} lg={2}> 
          {/* 给容器添加relative定位，创建堆叠上下文 */}
          <div className="autocomplete" style={{position: 'relative', zIndex: 10}}> 
            <input 
              type="text" 
              className="autocomplete" 
              placeholder="Search" 
              onChange={this.getItemName} 
              style={{width: '100%'}} // 让输入框占满容器宽度
            /> 
            {/* 给列表设置绝对定位、宽度、背景色等样式 */}
            <ul style={{
              position: 'absolute',
              top: '100%',
              left: 0,
              width: '100%',
              zIndex: 999,
              margin: 0,
              padding: 0,
              listStyle: 'none',
              backgroundColor: '#fff',
              border: '1px solid #ddd',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
              maxHeight: '200px',
              overflowY: 'auto'
            }}>{list}</ul> 
          </div> 
        </Col> 
      </Row> 
      {/* 移除不必要的z-index: -1 */}
      <div className="panel panel-default"> 
        <table className="table table-bordered"> 
          <thead> 
            <tr> 
              <th>Item ID</th> 
              <th>Item Name</th> 
              <th>Category</th> 
              <th>Wholesale Price</th> 
              <th>Retail Price</th> 
              <th>Quantity</th> 
              <th>Comment</th> 
              <th /> 
            </tr> 
          </thead> 
          <tbody> 
            {this.state.pageOfItems.map(item => ( 
              <tr key={item._id}> 
                <td>{item.itemid}</td> 
                <td>{item.itemname}</td> 
                <td>{item.category}</td> 
                <td style={{textAlign: "right"}}>{item.wholesaleprice.toLocaleString(navigator.language, { minimumFractionDigits: 2 })}</td> 
                <td style={{textAlign: "right"}}>{item.retailprice.toLocaleString(navigator.language, { minimumFractionDigits: 2 })}</td> 
                <td style={{textAlign: "right"}}>{item.quantitystock}</td> 
                <td>{item.comment}</td> 
                <td> 
                  <i className="glyphicon glyphicon-edit" onClick={() => this.props.history.push(`${this.props.match.url}/edit/${item._id}`)}></i> 
                </td> 
              </tr> 
            ))} 
          </tbody> 
        </table> 
      </div> 
      <Pagination items={this.state.items} onChangePage={this.onChangePage} /> 
    </div> 
  ); 
} 

为什么这样能解决问题？ #

• position: relative给自动补全容器创建了专属的堆叠上下文，让内部的绝对定位列表可以相对于这个容器精准定位。
• position: absolute让列表脱离文档流，不再占用原来的空间，同时z-index设置为更高的数值，就能轻松覆盖在下方的表格之上。
• 补充的宽度、背景色和滚动样式，保证了列表和输入框宽度一致，内容过多时可以滚动查看，且不会透显示下方的表格内容。

内容的提问来源于stack exchange，提问作者Maicmi