How to force FAB z-index

I am trying to style ion-fab to look this

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?


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

      <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-icon :icon="add"></ion-icon>


<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);

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

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-icon name="person"></ion-icon>

1 Like

It looks like edge only works when overlapping header.

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