Fab Button shown behind ion-slide

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}}">
        <button fab fab-right fab-top>
            <ion-icon name="cart"></ion-icon>

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


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:

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

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>

1 Like

You, sir, made my day.