React Bootstrap Modal出现在内容的其余部分而不是叠加层。

Question

您好我正在尝试使用Reat Bootstrap Modal它在它出现的方式下运行正常，问题是它出现在所有其他内容下面的底部而不是它应该工作的顶部

正如您在单击按钮时出现的标记区域中看到的那样，但由于某种原因，它会出现在所有内容之下。

这是它呈现的方式

<div>
   <label><b>Dina uppgifter</b></label>
   <br />
   <input type="text" placeholder="Namn eller användar-id" value={this.state.userId} onChange={this.setUserId} />
   </div>
   <Backup onSelectedDatabase={this.handleDatabaseSelected} onSelectedCustomer={this.handleCustomerSelected}/>
   <Version onSelectedVersion={this.handleVersionChange}/>
   <div>
   <label><b>Namn på Oystern</b></label>
   <br />
   <input onFocus= {this.oysterNameFocus} type="text" placeholder="Ange namn" value={this.state.oysterName} onChange={this.setOysterName}/>
   <p className="SmallText">Tillåtna tecken är A-Z, a-z och 0-9</p>
   </div>
   <div>
   <Button onClick={this.handleClickOyster}> Skapa oyster</Button>
   </div>
   <div>
   <Modal show={this.state.dbExistModal} onHide={() => this.setState({dbExistModal:false})}>
   <Modal.Title>Database already exsists. Are you sure you want to overwrite it?</Modal.Title>
   <Modal.Footer>
   <button onClick={this.createOyster}>Yes</button>
   <button onClick={() => this.setState({dbExistModal:false})}>No</button>
   </Modal.Footer>
   </Modal>
   </div>
   </div>

在底部，你会看到模态，如果我把它放在渲染的顶部，它总是出现在底部。谁知道为什么它不会出现在ontop上呢？