Menu
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?
376
It's a bad idea imho as it changes the default behaviour of elements without clear indication and it will have unforseen consequences. If you really want to have most elements positioned relative, you might want to think about just making div and similar relative.
As long as you structure your HTML so that the elements follow a logical order that makes sense when rendered without CSS, there is no reason why using absolute positioning should be considered bad practice.
As a special, use “relative” positioning with no displacement (just setting position: relative ) to make an element a frame of reference, so that you can use “absolute” positioning for elements that are inside it (in markup).
Relative Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
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.
172
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
