Ionic leaflet map with search bar

I am using Leafletjs to display a map view in one of my pages.
I would like to overlay a search bar on top how google maps has it. However, with the below code
the ion-content will always end up overlaying my search bar, even when I set the z-index.
The search bar is visible before the map fully loads, but then is in the background when map loading is finished.

Is there way how to make the search bar stick on top? I am overlaying fabs and those are visible.
Any property I could add to the search bar to stick above all?

<ion-content id="map" style="z-index: -1">

  <ion-searchbar style="z-index: 1"></ion-searchbar>

 <ion-fab bottom center>
    <button ion-fab (click)="fun()"><b>Hi</b></button>