Ionic/ Angular How to display a div ontop of a picture

@RobertLow wrote:

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>
                                    &nbsp; 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>

Posts: 1

Participants: 1

Read full topic