How to force FAB z-index

Ionic Framework Ionic Vue
1

I am trying to style ion-fab to look this

Screenshot 2021-02-19 at 11.55.46
Screenshot 2021-02-19 at 11.55.461436Ă—478 80 KB

But I am struggling to display it over the tabs
Screenshot 2021-02-19 at 11.58.26

I tried z-index: 99999 for ion-fab-button and ion-fab but no luck. What is the best way to force ion-fab (z-index) to be over everything else?

Page.vue

<template>
  <ion-page>
    <ion-content class="ion-padding">
      <h1 class="greeting">
        Hi, Kasonde!
      </h1>
      <p class="greeting-tag">
        Let's make your banking needs easy!
      </p>

      <img src="assets/img/card1.png" class="card-img" @click="cardDetails()" />

      <QuickActions />

      <SectionDivider data="History" />

      <RecentList :data="recentList" />

      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button>
          <ion-icon :icon="add"></ion-icon>
        </ion-fab-button>
      </ion-fab>

    </ion-content>
  </ion-page>
</template>

<style lang="scss" scoped>
ion-content {
  --background: var(--brand-secondary);
}

h1.greeting {
  font-size: 24px;
  color: #000000;
}

p.greeting-tag {
  color: var(--brand-tertiary);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

.card-img {
  margin: 30px 0;
}

ion-fab-button {
 --background: var(--brand-primary);
  top: 38px;
  margin-right: 15px;
  position: relative;
  --border-radius: 0;
  transform: rotate(44deg);
  --border-radius: 15px;

  ion-icon {
    transform: rotate(-44deg);
  }
}
</style>

This is what it looks like currently and here is a link to the repo.

2

See edge keyword?

<!-- fab placed to the top and end and on the top edge of the content overlapping header -->
  <ion-fab vertical="top" horizontal="end" edge slot="fixed">
    <ion-fab-button>
      <ion-icon name="person"></ion-icon>
    </ion-fab-button>
  </ion-fab>
1 Like
3

It looks like edge only works when overlapping header.

4

You need to put it in the tabs.vue component since it is the primary container… you will probably then need to manage its visibility through a state manager to determine when it should show or not based on what tab/page is visible

1 Like