React - zIndex does not work

Question

My React App with Autocomplete function is not yet complete. Please help to verify my code.

For the following code, I add the search box with className autocomplete style. when I type it show that autocomplete not overlap the table. I try to add both z-index in css and zIndex in react code but it is still not working.

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

By default, all HTML elements have an implicit position: static.

If you want to apply any of the 2d co-ordinates:

• top
• right
• bottom
• left

or the 3d co-ordinate:

• z-index

then you must explicitly declare a different kind of positioning.

Either:

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

Answer 2

Give position absolute to your ul in which you are showing result