React - zIndex不起作用

Question

我的具有自动完成功能的React应用程序尚未完成。 请帮助验证我的代码。

对于以下代码，我添加了带有className自动完成样式的搜索框。当我输入它时显示自动完成不与表重叠。 我尝试在css中添加z-index，在反应代码中添加zIndex，但它仍然无效。

render() {
        const list = this.state.items.map((item) => <li key={item._id} style={{zIndex: 99}}>{item.itemname}</li>);
    return (
      <div className="Receivings">
        <h1>Receivings</h1>
        <hr />
        <Row>
            <Col xs={8} sm={4} md={3} lg={2}>
                <div className="autocomplete" style={{zIndex: 10}}>
                    <input 
                        style={{zIndex: 10}}
                        type="text" 
                        className="autocomplete" 
                        placeholder="Search"    
                        onChange={this.getItemName}
                    />
                    <ul style={{zIndex: 10}}>{list}</ul>
                </div>

              </Col>
            </Row>
            <div className="panel panel-default" style={{ zIndex: -1 }}>
                <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>
    );
  }
}

Answer 1

默认情况下，所有HTML元素都具有隐式position: static。

如果您想申请任何二维坐标：

• top
• right
• bottom
• left

或3d坐标：

• z-index

然后你必须明确声明一种不同的定位。

或者：

• position: relative;
• position: absolute;
• position: fixed;
• position: sticky;

Answer 2

给你显示结果的ul绝对位置