html - Preventing two position absolute elements from colliding

Question

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).

标签： htmlcss

Answer 1

你不应该把它们当作绝对的，它们应该是相对的，然后一旦你再次排列它们，你就可以设置类似padding-bottom: 10px;图像的东西