First time user here, need help with structuring

Hey guys, I am currently building my first app using Ionic (with angular + capacitor / cordova plugins are supported).

This is my first time building an app so I didn’t want do build something completly new, but instead I wanted to try stuff out. I wanted to make an app kinda like Google maps (I used the Openlayers Map).

Now to my main problem: I wanted to have a searchbar ON TOP (bit weird to describe what I mean, think like 2 Layers in photoshop and one is on the bottom (map) and one is on top (searchbar)) of my map and not just above, but the standard search bar in Ionic gets placed above my map surrouned by a white ‘container’. I only want the actual search bar and the fully fuctional map in the “background” of my ion-content (main content).


This is my app so far, I added the picture because I figured my description was not that great.

I have tried doing it with z-index, but this only changes the… z-index and not the actual position of the components. It’s still above of my map, but on a different z-index.

I know the information given is maybe a bit vague, given that I’m not experienced with Ionic I don’t know exactly what information you need to find a solution for this problem. I will try to answer to your replies if you need further information.

Thank you!

without knowing for sure, but you could consider placing ion-searchbar in a div which gets a position absolute and appropriate z-index to remain on top and hover the map. T

1 Like

Thank you very much, that worked!

1 Like