z index not working bootstrap

Question

I have created 2 bootstrap model. first model opens when checkbox checked, second model is show but this model behind in first model always. and i want second model in front of first model.

First model:

<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>

Second model:

<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

Please try z-index:1111 instead of 1. Hope it will help you.