z索引不工作bootstrap

Question

我创建了2个bootstrap模型。当复选框选中时，第一个模型打开，第二个模型显示，但这个模型总是在第一个模型中。 我想在第一个模型面前的第二个模型。

第一个模型：

<div class="modal" class="modal-container" id="symptom-details-modal" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content modal-content-container">
      <div class="modal-body modal-body-container" id="symptom-details-modal-body">
      </div>
    </div>
  </div>
</div>

第二种模式：

<div id="snackbar-container" style="width: 1283px;">
  <div id="snackbar"></div>
</div>

<style>
  #snackbar-container {
    position: absolute;
    width: 100%;
    text-align: center;
    visibility: hidden;
    top: 80px;
    z-index: 1;
  }

  #snackbar {
    max-width: 40%;
    margin: 0 auto;
    background-color: #4caf50;
    padding: 8px;
    border-radius: 2px;
    font-size: 12px;
    color: white;
  }

</style>

Answer 1

请尝试使用z-index：1111而不是1。 希望它会对你有所帮助。