CSS使用负面相对定位问题 [英] 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;

这给出了预期的结果，但是我在底部得到了60px的额外空间.

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

如何清除这个多余的空间?

How do I clear this extra space?

推荐答案

Paul是正确的. margin-top: -60px;代替top: -60px;.另一种可能的解决方案是将主体"设置为position: relative;，然后在页脚上使用position: absolute; bottom: 60px;-尽管这意味着页脚需要在主体"内部移动.尽管只要页脚的父项带有主体"，您就可以在该元素上使用相同的技巧.

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.

这篇关于CSS使用负面相对定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！