Streaming live at 10am (PST)

Chrome shows but not safari negative section

Hi guys,

I ran into a Safari issue and wondering if someone could help. I have a background video hero and right below, a section using a white wave svg https://www.lauracapinas.com/ I used negative margins to bring the wave on top of the video. It works on Chrome but for some reason, not Safari. And on the rest of the pages, the wave shows on top of images on both browsers.

I read that it’s good to avoid negative margins but not sure of other options.

https://preview.webflow.com/preview/laura-c?utm_medium=preview_link&utm_source=designer&utm_content=laura-c&preview=a2b49134e2cab642824c2f48d2c6be04&mode=preview

Hey Mike

I would suggest that you place the wave inside of background video and give the wave div a position: absolute and bottom. On all the other pages you should place the wave inside the hero section and give hero section a position: relative. When you want to place an element a specific place and on top of another element – using position absolute and z-index are two useful properties :grinning:

David

1 Like

Thanks a ton David! Perfect and simple!

1 Like