我有一个页眉、主体和页脚。标题和主体的样式正确。现在对于页脚，我想让它出现在主体后面，所以我使用了：
z-index: -1;
position: relative;
top: -60px;
这给出了预期的结果，但我在底部得到了 60px 的额外空间。
如何清除这个额外的空间？
问问题
56961 次
7 回答
32
保罗是正确的。margin-top: -60px;而不是top: -60px;. 另一种可能的解决方案是将“主体”设置为position: relative;然后在页脚上使用position: absolute; bottom: 60px;- 尽管这意味着页脚需要在“主体”内移动。尽管只要页脚的父级与“主体”一起流动，您就可以在该元素上使用相同的技巧。
于 2010-02-17T13:25:31.373 回答
6
底部的“额外”空间是页脚将占用的空间。相对定位的元素在页面布局流中仍然占据相同的空间，即使它们出现在其他地方。
你可以在你的主体上尝试一个负的底部边距。您可能会发现这意味着您不需要top: -60px;页脚。
于 2010-02-17T13:00:26.333 回答
4
您仍然可以使用：
position: relative;
top: -60px;
对于您需要但设置的部分
margin-top: -60px;
到下一个出现的部分。在这种情况下 - 页脚。
于 2015-09-13T16:40:33.750 回答
2
另一个解决方案是：
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
top 创建额外的边距，margin-bottom 删除它
出于某种原因，h 标签只有这对我有用。负边距顶部不起作用
于 2016-09-14T11:01:25.087 回答
1
实现这一点的一种方法是将 div 放入另一个absolute'ly 定位的 div 中，以便将其从文档流中取出。
于 2010-02-17T12:45:55.157 回答
1
不是真正直接回答您的问题，但根据您想在主要内容后面显示的内容，您也许可以伪造它。
如果是图片，您可以简单地将其放入html {}or body {}（或封装所有内容的 div 中）并将其与底部对齐。
于 2010-02-17T14:21:20.363 回答
0
适当的答案是使主体具有相对位置，然后使用绝对位置并使用您选择的顶部来设置您想要样式的样式
于 2020-12-07T09:04:08.103 回答