CSS using negative relative positioning issue

css css-position
codingbbq picture codingbbq · Feb 17, 2010 · Viewed 48.8k times · Source

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

prodigitalson picture prodigitalson · Feb 17, 2010

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.

Related questions

How can I center an absolutely positioned element in a div?

I need to place a div (with position:absolute;) element in the center of my window. But I am having problems doing so, because the width is unknown. I tried this. But it needs to be adjusted as the width …

Read More
Fixed position but relative to container

I am trying to fix a div so it always sticks to the top of the screen, using: position: fixed; top: 0px; right: 0px; However, the div is inside a centered container. When I use position:fixed it fixes the …

Read More
How to center a "position: absolute" element

I'm having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered?

Read More