CSS 使用负相对定位问题
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2280625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS using negative relative positioning issue
提问by codingbbq
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.
这给出了所需的结果,但我在底部获得了 60px 的额外空间。
How do I clear this extra space?
我如何清除这个额外的空间?
回答by prodigitalson
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.
保罗是对的。margin-top: -60px;
而不是top: -60px;
. 另一种可能的解决方案是将“主体”设置为position: relative;
然后position: absolute; bottom: 60px;
在页脚上使用- 尽管这意味着页脚需要移动到“主体”内。尽管只要页脚的父级与“主体”一起流动,您就可以在该元素上使用相同的技巧。
回答by Paul D. Waite
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.
您可以尝试在主体上设置负底边距。您可能会发现这意味着您不需要top: -60px;
在页脚上。
回答by Mike Shema
You can still use:
您仍然可以使用:
position: relative;
top: -60px;
for the section you need but set
对于您需要但设置的部分
margin-top: -60px;
to section which appears next. In this case - footer.
到接下来出现的部分。在这种情况下 - 页脚。
回答by raveren
One way to achieve that would be to put the div inside another, absolute
'ly positioned div so that it's taken out of the document flow.
实现这一目标的一种方法是将 div 放在另一个absolute
定位好的 div 中,以便将其从文档流中取出。
回答by jeroen
Not really a direct answer to your question, but depending on what you want to display behind the main content, you can perhaps just fake it.
并不是对您的问题的直接回答,但根据您想在主要内容后面显示的内容,您也许可以伪造它。
If it′s an image, you can simply put it in html {}
or body {}
(or a div that encapsulates all content) and align it to the bottom.
如果它是一个图像,你可以简单地把它放在html {}
or body {}
(或一个封装所有内容的 div 中)并将其对齐到底部。
回答by Mantas Karanauskas
another solution for this is:
另一个解决方案是:
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
top creates extra margin and margin-bottom removes it
top 创建额外的边距,而 margin-bottom 将其删除
for some reason for h tag only this worked for me. negative margin-top doesnt work
出于某种原因,h 标签只对我有用。负边距顶部不起作用