Google map component floats on top and does not fit its style's size

Design help General
1

Sorry if this is very naive. I am a newcomer to Webflow and web design in general.

I have a header with a fixed position and a Google map component in the main content of the page. When I scroll down the main content, header floats on top of the page and the main content disappears underneath, as it should. But the map does not. Instead, it scrolls up and is displayed on top of the header (Fig 1 and 2)

3644Ă—2994 1.25 MB

Fig 1

3644Ă—2994 1.47 MB

Fig 2

When I try to fix this problem by adjusting the Position property of the map, the map expands beyond its specified size and still floats on top (Fig 3).

3700Ă—3050 1.15 MB

Could you please point to a solution? Thanks!

Here is my public share link: 1
(how to access public share link)

2

@skryazhi

Hi!

This is a very simple solution! Just select your header (since it’s a symbol overlayed by a green color, double click it) and then go down yo your position settings and give it a “Z-index” of 1. See image below:

3

Very simple indeed. Thank you!

4

No problem! Glad I could help :slight_smile: