CSS using negative relative positioning issue

问题:

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?

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

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.

回答5:

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.

回答6:

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