How do I put an ion-content on top of an ion-navbar?

I’m trying to implement a popup window in my app. Here is the basic structure of my 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>

So you see, I have a header with a navbar, an ion-content for the default page content, and the last ion-content is something I want to be on top of everything when isPopupHidden is false. The problem is that my popup section is always underneath the ion-navbar. (Note: testing shows that it displays above ion-header). So I need it to overlap everything, including ion-navbar. I’ve tried messing with z-indexes but that didn’t help. Any thoughts?

Edit: Here is a screenshot of my issue. Notice how the navbar overlaps my popup. Screenshot_20180519-162234

I think it is easier if you use modal.

You could try adding and removing styles from the <ion-header> element.

See: https://github.com/WickyNilliams/headroom.js#how-does-it-work

Thanks, the modal is my backup. I want the popup to hover above the current page with the current page still slightly visible. It doesnt seem like the modal can achieve this

You can use the modal option for backdrop and control it’s transparency, it is in the modal documents too.

Alright thanks, I’ll take a look at it then!