CSS使用负相对定位问题

Question

我有一个标题,主体和页脚.标题和主体都有正确的样式.现在对于页脚我想让它出现在主体后面,所以我使用了:

z-index: -1;
position: relative;
top: -60px;

这给出了期望的结果,但我在底部获得了60px的额外空间.

如何清除这个额外的空间？

Answer 1

保罗是对的.margin-top: -60px;而不是top: -60px;.另一个可能的解决方案是将"主体"设置为position: relative;然后position: absolute; bottom: 60px;在页脚上使用- 尽管这个结构意味着页脚需要在"主体"内移动.虽然只要页脚的父节点与"主体"一起流动,你就可以在该元素上使用相同的技巧.

Answer 2

底部的"额外"空间是页脚占用的空间.相对定位的元素仍占用页面布局流程中的相同空间,即使它们出现在其他位置.

你可以尝试在你的主体上留下负底边.您可能会发现这意味着您不需要top: -60px;在页脚上.

Answer 3

您仍然可以使用：

position: relative;
top: -60px;

对于您需要但设置的部分

margin-top: -60px;

到接下来出现的部分。在这种情况下 - 页脚。