I’m currently working on a website with a custom map code/embed block. When a certain action is performed on the map (such as flagging a location) the code will call the report form element to become visible.
I’m okay with the coding bit mostly, but I can’t seem to position the form block to appear on top of the embed block. I’ve tried setting the z-index to 100, set position to relative, but haven’t been able to figure it out. The form block always appears below (not behind either) the embed.
Any advice on how I can get the form block to appear on top of the embed and centered on the page?
To create a pop-up form that appears over your map embed, you’ll need to set up a modal structure. First, add a Div block to serve as your pop-up wrapper. Give it a class name like “Pop-up wrapper” and apply these essential styles:
Set the wrapper properties:
Position: Fixed
Display: Flex
Flex direction: Column
Justify content: Center
Align items: Center
Width: 100%
Height: 100%
Z-index: 9999
Background: rgba(0,0,0,0.8)
Place your form element inside this wrapper and style it with appropriate width, padding, and background color to stand out against the overlay. The fixed position and high z-index ensure your form will appear centered and above all other elements, including the map embed.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Set the map container to relative and the form to absolute with a higher z-index. Use top and left 50% with transform translate to center it perfectly Rolls Royce precision.