CSS using negative relative positioning issue

Question

I have a header, mainbody and footer. Header and mainbody are properly styled. Now for footer I want to make it appear behind mainbody, so I used:

z-index: -1;
position: relative;
top: -60px;

This gives the desired result, but I get an extra space of 60px at the bottom.

How do I clear this extra space?

Answer 1

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.

Answer 2

another solution for this is:

z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;

top creates extra margin and margin-bottom removes it

for some reason for h tag only this worked for me. negative margin-top doesnt work

Answer 3

One way to achieve that would be to put the div inside another, absolute'ly positioned div so that it's taken out of the document flow.

Answer 4

Not really a direct answer to your question, but depending on what you want to display behind the main content, you can perhaps just fake it.

If it´s an image, you can simply put it in html {} or body {} (or a div that encapsulates all content) and align it to the bottom.

Answer 5

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.

Answer 6

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.