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?

Endospore

In what browsers? And do you have a demo-page set up? – Appenzell

I am using firefox right now for coding. I Have it at localhost. – Endospore

No problem — and don’t worry, your question was very clear. Just thought I’d tidy it up a bit. – Paternity

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

Ulu

Thanks prodigitalson. Tried both the solutions you provided. For margin-top : - 60px it does not make any changes and remains there itself. However in DW it shows the effect. Also using position :absolute causes the div#footer to behave differently. I think there is something in the mainbody itself that is causing the error. Thanks all for quick help tips and pointers. Really appreciate. – Endospore

I am having the same issue - if you put a colour behind the text you'll see that the browser is 'rendering' the text at the normal position, then moving it up - so it's creating a space. I need a shadow on my rollover so this doesn't work. – Rowe

Damn I already knew this answer, but it jogged my memory and save me a very big headache... thanks :) – Logjam

Negative margin-top can cause unpleasant shifting during rendering in Chrome. – Bora

negative margin tops are not supported in IE – Kreplach

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

Paternity

I tried that, but it got the main body down. The extra space due to footer still exist. Thanks for your reply.. – Endospore

Hmmm. How about replacing top: -60px on the footer with margin-top: -60px? That should affect the document flow and the footer’s positioning. (I’m assuming your footer is 60 pixels tall.) – Paternity

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

Chummy

Answer 4

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

Disrelish

The 'margin-bottom' removed the space that broken my layout, thanks! – Enclosure

Answer 5

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.

Rinehart

I'm also not sure what you achieve with z-index, I'm pretty sure, nothing would change if you'd turn off that rule. IIRC, negative z-index'es hide content when printing - and that's it. – Rinehart

Actually with Z-index = -1, I want the footer to half appear behind body. So it looks as if my footer starts from somewhere behind the body and continues till the end of the page. – Endospore

I think z-index only works with positive values except the printing case. Anyway, did you try the absolute solution? – Rinehart

I used Z-index = -1 , and it takes my div at the back of the main body div. Just exactly how i wanted. On to trying the absolute solution. – Endospore

Answer 6

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.

Appenzell

Answer 7

The appropriate answer is to make the body have position relative then style what you want to style using position absolute and using top of your choice

Ontogeny