Hi, I wanted to put a div on top of a image. I have tried with z-index and z-index ! important. However the image is always on top of the div.
This is my template.html
<div>
<ion-slides loop="true" slidesPerView="2">
<ion-slide *ngFor="let img of images">
<img src="assets/imgs/{{img}}" alt="skeleton" usemap="#ImageMap" style="z-index:-100% !important;">
</ion-slide>
</ion-slides>
<map name="ImageMap">
<area alt="1" title="1" coords="142,130,74,1" shape="rect" >
<area alt="2" title="2" coords="179,381,37,134" shape="rect" >
</map>
</div>
<span class="popoverDiv">
<ion-card>
<ion-card-header text-start text-uppercase text-wrap>
<ion-icon name="md-alert" style="zoom:0.4; color:red;"></ion-icon>
DivHeader
</ion-card-header>
<ion-card-content>Content</ion-card-content>
</ion-card>
</span>
<style>
.popoverDiv {
position: fixed;
top: 15%;
left: 60%;
width: 40%;
z-index: 30%;
zoom: 0.6;
}
</style>