我正在尝试在我的应用程序中实现一个弹出窗口 . 这是我的html的基本结构:

<ion-header>
    <ion-navbar>
        <ion-title>{{title}}</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <...>
</ion-content>

<ion-content class = "popup" [hidden] = "isPopupHidden" >
    <...>
</ion-content>

所以你看,我有一个带有导航栏的 Headers ,一个用于默认页面内容的离子内容,最后一个离子内容是当isPopupHidden为false时我希望在所有内容之上 . 问题是我的弹出部分总是在离子导航栏下面 . (注意:测试表明它显示在ion-header之上) . 所以我需要它重叠一切,包括ion-navbar . 我试过搞乱z-index,但这没有帮助 . 有什么想法吗?

编辑:这是我的问题的图像 . 请注意导航栏如何位于弹出窗口之上:

Page Screenshot