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。希望对你有帮助。

z 索引不工作 bootstrap

z index not working bootstrap

jquery

z-index