I have a unique challenge of creating a customized popup that is based on a dynamic template, background, and actions, in order to manage an overlay div.
The requirement is for this div to be placed inside the ion-content.
However, there seems to be an issue where the overlay div cannot cover the header, possibly due to its high z-index compared to other elements on the page.
A similar problem has been discussed on the Ionic portal here, but a solution has not yet been found.
Feel free to review the source code snippet below, which is currently being used in my application.
<!---HTML source -->
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Hello</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="overlay">Test</div>
</ion-content>
</ion-app>
/** css source */
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
right: 0;
left: 0;
bottom: 0;
}
I am seeking assistance in resolving this CSS-related issue. Any help would be greatly appreciated.