앞쪽에 모달을 표시하는 방법은 무엇입니까?

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- 인덱스 상대 div는 절대 또는 고정 div의 Z- 인덱스와 아무 관련이 없습니다.

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