Preventing two position absolute elements from colliding

I have a created a mock of my site here where we have two elements on the screen. A logo and a form.

Both are positioned absolute, but on smaller screens, they end up colliding(or all most). I know there is no way to make a 'margin-top' on elements that have position: absolute so how could I put space between these two elements (allow scrolling) when viewed on smaller screens?

Here is the codepen link for you to review. I've provided as much information here as I can: https://codepen.io/riza-khan/pen/VwPrXzo?editors=1100

When screen is small, they almost collide (its more severe on the live version).

https://stackoverflow.com/questions/67013587/preventing-two-position-absolute-elements-from-colliding April 09, 2021 at 08:42AM