Реагировать - zIndex не работает

Мое приложение React с функцией автозаполнения еще не завершено. Пожалуйста, помогите проверить мой код.

Для следующего кода я добавляю поле поиска со стилем автозаполнения className. когда я печатаю, это показывает, что автозаполнение не перекрывает таблицу. Я пытаюсь добавить как z-index в css, так и 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>
    );
  }
}