如何使页脚不重叠并正确定位？

I have a footer at the bottom of my pages, a box ad at the top of that footer, and a form. These 3 elements are spaced out appealingly (only on my screen size) through position: absolute. Whenever I change my browser size, I've made it so that the footer stays away from my ad and doesn't overlap. My form never overlaps with my ad when resized and it is perfect for all screen sizes. On the other hand, my footer overlaps my ad on different screen sizes, and I don't want to spend time on all my pages adding media queries to fix this. If the screen size is small, the footer will either overlap or be way down at the bottom. Also, whenever a user opens a page with a screen width of greater than 500, the ad becomes a horizontal ad,leaving empty space and making the website unappealing at the bottom. This is an example of my css code:I have a footer at the bottom of my pages, a bo