Fab Button shown behind ion-slide

Ionic Framework ionic-v3
1

I am having a little issue with my Fab button being behind an image even though the z-index is above. This only happens to the items that are off the screen. Any help would be much appreciated!

I used card-advanced-map as a guide.

<ion-card *ngFor="#item of items | async">
    <div style="position: relative">
        <ion-slides pager>
            <ion-slide *ngFor="#image of item.images">
                <img src="{{image.url}}">
            </ion-slide>
        </ion-slides>
        <button fab fab-right fab-top>
            <ion-icon name="cart"></ion-icon>
        </button>
    </div>
    <ion-item>
        <h2>{{item.name}}</h2>
        <p>{{item.description}}</p>
    </ion-item>
</ion-card>

Button css
top: calc(100% - 35px);
z-index: 50;

image

2

Same problem, I can’t click on the button because of slides which are getting the event instead of fab …

EDIT: I finally change the css property z-index and tadaaaa that works fine :wink:

3

Same problem here. z-index works fine but doesn’t feel like a proper solution.

4

Use ion-fixed :slight_smile:

<ion-fab bottom right ion-fixed>
   <button ion-fab mini color="primary"> <ion-icon ios="md-add" md="md-add"></ion-icon></button>
</ion-fab>
1 Like
6

You, sir, made my day.