Fab Button shown behind another fab button

[rahuls2704]

I am having a little issue with my Fab button being behind another Fab button, some issue with Fab button z-index. Any help would be much appreciated!

I use FabButton for your reference.

<!-- first fab button -->
  <ion-fab #fab3 left bottom>
    <button (click)="fabBookmarkClicked(fab3)" ion-fab>
      <ion-icon name="ios-arrow-dropright"></ion-icon>
    </button>
    <ion-fab-list side="right">
      <button (click)="flyToAbudhabi()"  ion-button round class="bookmark-btn-res">Abu dhabi</button>
      <button (click)="flyToAlain()"  ion-button round class="bookmark-btn-res"> Al Ain</button>
      <button (click)="flyToAldhafra()"  ion-button round class="bookmark-btn-res">
        Al Dhafra</button>
    </ion-fab-list>
  </ion-fab>
  <!-- end of - second fab  -->


<!-- right bottom option fab -->
  <ion-fab #fab2 right bottom>
    <div id="idOptionBtn" ion-fab
      (click)="fabOpitonClicked(fab2)">
      <ion-icon name="md-search"></ion-icon>
    </div>

    <ion-fab-list side="left">
      <div ion-fab (click)="openSearchForPlot()">
        <img src="assets/img/search_24.png"/>
      </div>
      <div ion-fab (click)="qrScanner()">
        <img src="assets/img/qr-code40.png" />
      </div>
    </ion-fab-list>
  </ion-fab>
  <!-- end of - right option fab -->

[jd314159]

Did you find a solution to this yet?

Same problem. I have several rows of FABs. Oddly, when the bottom row opens up (e.g. ) it overlays the top row FABs just fine. However, when the top row opens down (e.g. the bottom row fabs are on top of it. Why does “top” work ok when overlaying FABs but “bottom” does not?

Thanks.