html - 如何在html ionic 3中为弹出模式提供z-index的位置和使用

Question

这是我使用模态创建弹出窗口的方式

 <div *ngIf="showModal" id="myModal" class="modal">
    
        <!-- Modal content -->
        
        <div class="modal-content">
            <span class="close" (click)="closeMdl()">&times;</span>
            <ion-label style="padding-top: 10vw;
        padding-left: 2vw;
        white-space: pre-wrap;
        font-size: 4.5vw;">Please select mode of Payment and Payment Amount</ion-label>
            <ion-grid class="removepadding">
    </ion-grid>
    </ion-label>
</div>
</div>

scss-

.modal {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 10vw;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content/Box */
.modal-content {
color: #3b3b3d;
background-color:rgba(48, 47, 46, 0.8);
margin: 25% auto;
padding: 2vw;
padding-top: 0vw;
border-radius: 2vw;
width: 80%;

}

请参阅随附的屏幕截图。当我在最后一个项目中选择一个下拉菜单时，弹出窗口会上升，而是应该显示在该位置。

标签： htmlionic-frameworkionic3scss-mixins