CSS using negative relative positioning issue

The “extra” space at the bottom is the space that the footer would be taking up. Relatively positioned elements still take up the same space in the page’s layout flow, even though they’re appearing somewhere else.

You could try a negative bottom margin on your mainbody. You may find this means you don’t need top: -60px; on your footer.

Paul is correct. margin-top: -60px; instead of top: -60px;. Another possible solution would be to set the "mainbody" to position: relative; then to use position: absolute; bottom: 60px; on the footer - although this woild mean the footer needs to be moved inside "mainbody". though as long as the parent of footer flows with "mainbody" you could use this same trick on that element instead.

You can still use:

position: relative;
top: -60px;

for the section you need but set

margin-top: -60px;

to section which appears next. In this case - footer.