How to open modal behind ion-tabs [ IONIC 4 ]

Question

How can I show the modal behind the tabs? Currently the modal overlaps everything even though the z-index is set to 2 and the z-index of the tabs is set to 5.

How it currently is

How I want it to be

I have been trying to use z-index, however it doesn't work on the modal. Here's the code:

Modal creation

const modal = await this.modalController.create({
  showBackdrop: false,
  backdropDismiss: true,
  component: CreateExpenseComponent,
  cssClass: "createExpenseModal",
});
return await modal.present();

Modal CSS (global.scss)

.createExpenseModal {
  position: absolute;
  z-index: 2 !important;
  //--backdrop-opacity: 0 !important;
  .modal-wrapper.sc-ion-modal-ios,
  .modal-shadow.sc-ion-modal-ios {
  z-index: 2;
  position: absolute;
  top: 35rem;
  }
 }

Ion tabs css

 ion-tabs {
  z-index: 5;
  position: relative;
 }

Thank you for your time!

Answer 1

I don't think what you are trying to achive with z-index is possible since the ion-modal element is appended outside of the current page. But there's a way you could work your way through it.

You can divide your background effect in 2 parts:

1. The first part is were your floating button is, i assume you have it along side the ion-tab-button in the tab bar. You can add a background-color with colors that matches the one on the modal, and create a type of teardown effect with pure css or the exact shape you are looking for. There's a ton of examples out there, you can learn more about it here.
2. The second part is to position your modal right on top of the tab bar using bottom css property.