使用负相对定位问题的CSS

我有一个标题，主体和页脚。标题和主体的风格正确。现在的页脚我想使它看起来落后型主体，所以我用：使用负相对定位问题的CSS

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

这给了想要的结果，但我得到60像素的底部的额外空间。

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

来源

2010-02-17 noobcode

在哪些浏览器？你有没有设置演示页面？ – jeroen 2010-02-17 12:46:58

我现在使用firefox进行编码。我在本地。 – noobcode 2010-02-17 13:06:56

感谢保罗编辑我的文章，并使其看起来更干净。下次我会尽量更清楚。谢谢 – noobcode 2010-02-17 13:07:56

保罗是正确的。 margin-top: -60px;而不是top: -60px;。另一种可能的解决方案是将“主体”设置为position: relative;，然后在页脚上使用position: absolute; bottom: 60px;--尽管这种行为意味着页脚需要在“主体”内移动。尽管只要页脚的父项与“主体”一起流动，您就可以在该元素上使用相同的技巧。

来源

2010-02-17 13:25:31 prodigitalson

谢谢prodigitalson。试用了您提供的两种解决方案。对于margin-top： - 60px，它不做任何更改并保留在那里。然而在DW中它显示了效果。同样使用position：absolute会导致div＃页脚的行为不同。我认为主体本身有一些导致错误的东西。感谢所有的快速帮助提示和指针。万分感激。 – noobcode 2010-02-17 13:37:41

margin-top为我工作。谢谢 – mark 2013-07-18 21:04:02

我遇到了同样的问题 - 如果您在文本后面添加颜色，您会看到浏览器正常位置上的“渲染”文本，然后将其移动 - 这样就创建了一个空间。我需要一个影子，因为这不起作用。 – niico 2013-10-20 15:48:19

实现这一目标的一种方法是将div放入另一个文件夹中，absolute'将div定位，以使其脱离文档流。

来源

2010-02-17 12:45:55 raveren

我也不确定你用'z-index'实现了什么，我敢肯定，如果你关掉这个规则，什么都不会改变。 IIRC，负面的'Z-索引'在打印时会隐藏内容 - 就是这样。 – raveren 2010-02-17 12:55:09

其实Z-index = -1时，我希望页脚在主体后面出现一半。所以看起来好像我的页脚从身体后面的某处开始并持续到页面结束。 – noobcode 2010-02-17 13:13:48

我*认为* z-index只适用于除印刷品外的正值。无论如何，你是否尝试过“绝对”解决方案？ – raveren 2010-02-17 13:17:35

底部的“额外”空间是页脚将占用的空间。相对定位的元素在页面的布局流程中仍占用相同的空间，即使它们出现在别的地方。

您可以在主体上尝试一个负底部边距。您可能会发现这意味着您的页脚上不需要top: -60px;。

来源

2010-02-17 13:00:26

我试过了，但它使主体下降了。由于页脚的额外空间仍然存在。感谢您的回复。 – noobcode 2010-02-17 13:10:57

嗯。如何用'margin-top：-60px'替换footer上的'top：-60px'？这应该会影响文档流和页脚的位置。（我假设你的页脚是60像素高。） – 2010-02-17 14:05:30

对于您的问题并非真正直接的答案，但取决于您想要在主要内容背后显示的内容，您可能只是伪造它。

如果它是一个图像，你可以简单地把它放在html {}或body {}（或封装所有内容的div）并将其与底部对齐。

来源

2010-02-17 14:21:20 jeroen

谢谢jeroen为你回复.. – noobcode 2010-02-17 14:31:34

你仍然可以使用：

position: relative; 
top: -60px;

您需要的部分，但设置

margin-top: -60px;

到下一个出现部分。在这种情况下 - 页脚。

来源

2015-09-13 16:40:33

这另一种解决方案是：

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

顶部创建额外的保证金和下边距中删除

由于某种原因，用于h标签只有这个工作对我来说。负边缘顶不起作用

来源

2016-09-14 11:01:25

使用负相对定位问题的CSS

回答

相关问题