发送回

Question

谷歌地图的div我有这种情况

试图登录时，弹出出来。我想这是继谷歌地图的div

所以，这是我的弹出

.popup-inner { 
    max-width:500px; 
    width:90%; 
    padding:40px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    -webkit-transform:translate(-50%, -50%); 
    transform:translate(-50%, -50%); 
    box-shadow:0px 2px 6px rgba(0,0,0,1); 
    border-radius:3px; 
    background:#fff; 
    z-index:9999999; 

的风格，同时背部变得

.popup { 
    width:100%; 
    height:100%; 
    display:none; 
    position:fixed; 
    top:0px; 
    left:0px; 
    background:rgba(0,0,0,0.75); 
} 

，这是弹出

<div class="popup" data-popup="popup-1"> 
      <div class="popup-inner"> 

       <form action="#" th:action="@{/}" method="post" class="form-signin"> 

        <div class="form-group"> 
//content of the form... 
         </div> 

       </form> 
       <p> 
        <a data-popup-close="popup-1" href="#">Close</a> 
       </p> 
       <a class="popup-close" data-popup-close="popup-1" href="#">x</a> 

      </div> 

     </div> 

这张地图有一个简单的，而流行的

<div id="map"></div> 

这种风格

#map { 
    width:100%; 
    height: 600px; 
    z-index: 1; 
} 

Answer 1

只需添加z-index:2;到.popup

.popup { 
    z-index:2; 
} 

Answer 2

有没有在你的代码的一些变化，看看我的片段也有一些，你应该阅读评论。

希望这会为你做的工作！

.popup { 
 
    /*display:none; //change it back to its original*/ 
 
    display:block; 
 
    width:100%; 
 
    height:100%; 
 

 
    top:0px; /* 0px is 0 by default cause there does not exist 0 pixels. So only 0 is ok */ 
 
    left:0; 
 
    background:rgba(0,0,0,0.75); 
 
} 
 
    
 
.popup-inner { 
 
    position:fixed; /* changed position: absolute to fixed */ 
 
    width:90%; 
 
    max-width:500px; 
 
    
 
    top:50%; 
 
    left:50%; 
 
    
 
    padding:40px; 
 
    
 
    -webkit-transform:translate(-50%, -50%); 
 
    transform:translate(-50%, -50%); 
 
    box-shadow:0px 2px 6px rgba(0,0,0,1); 
 
    border-radius:3px; 
 
    background:red; 
 
    z-index: 10; 
 
} 
 

 
    
 
    
 
#map { 
 
    width:100%; 
 
    height: 600px; 
 
    z-index: 1; 
 
    background-color: pink; /* used to check the positions, make sure to remove the line */ 
 
}

<div class="popup" data-popup="popup-1"> 
 
    <div class="popup-inner"> 
 

 
    <form action="#" th:action="@{/}" method="post" class="form-signin"> 
 

 
    <div class="form-group"> 
 
     //content of the form... 
 
    </div> 
 

 
    </form> 
 
    <p> 
 
     <a data-popup-close="popup-1" href="#">Close</a> 
 
    </p> 
 
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a> 
 

 
    </div> 
 

 
</div> 
 

 
<div id="map"></div>