Как показать модальные на передней панели?

Question

Показать модальный спереди. Когда я увеличиваю margin-top, модальный div скрывается за другим div, что я должен делать. Как я застрял в этой проблеме.

и CSS код:

.vertical-alignment-helper { 
    display:table; 
    height: 100%; 
    width: 100%; 
    pointer-events:none; 
} 

.vertical-align-center { 
    display: table-cell; 
    vertical-align: middle; 
    pointer-events:none; 
} 

.modal-content { 
    border: .5px solid rgba(0,0,0,.2) !important; 
    border-radius: 1px !important; 
    border-color: rgba(255, 0, 0, 0.64) !important; 
    width:inherit; 
    height:inherit; 
    margin: 0 auto; 
    pointer-events:all; 
} 

.close { 
    margin-top: -20px !important; 
    margin-right: -10px !important; 
} 

.close:hover{ 
    background-color:none !important; 
} 

вот мой HTML код

<li class="pull-right"><a href="#" class="getmap button btn-small yellow-bg white-color" role="button" data-toggle="modal" data-target="#myModal" onclick="getmap()">GET DIRECTIONS</a></li> 





      <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="vertical-alignment-helper"> 
    <div class="modal-dialog vertical-align-center"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span> 

       </button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 

      </div> 
      <div class="modal-body row"> 
      <div class="col-md-3"> 
      <div class="form-group"> 
    <input type="text" class="form-control" placeholder="MinVal"> 
</div> 
<div class="form-group">  
    <input type="text" class="form-control" placeholder="MaxVal"> 
</div> 
      </div> 
      <div class="col-md-9" id="mymap" style="width: 400px; height: 200px"> 



      </div> 

     </div> 
    </div> 
</div> 

Answer 1

Дайте максимальное значение Z-индекс

.modal{z-index:99999;} 

Answer 2

z-index для относительного div не имеет ничего общего с z-индексом абсолютно или фиксированного div.

.modal-content { 
     position:absolute; 
     z-index:9999999; 
    }