如何消除与位置的差距：相对横幅

Question

有什么推荐和推荐？摆脱position:relative造成的差距的最优雅的方法？

我有一个首页，想要放置一个横幅，该横幅将部分位于标题和内容部分上方，但使用位置：相对会产生一个空白区域...

参见示例（我希望文本位于红色的正下方框):

http://jsfiddle.net/Ru2CT/

我知道我可以创建另一个亲戚将 div 定位为我的文本的父级，但随后我仍然会有间隙，但内容部分和内容部分之间仍然存在间隙。页脚...

有什么想法吗？ :)

Answer 1

获取灰色框中的全部内容，并将其放置在 div 中（拉伸到相同大小）。然后使用position:relative 向上移动该框。这将具有使用红色“滑块”/横幅事物移动文本的效果，而不移动灰色背景。

开始了：
http://jsfiddle.net/4BLFJ/ [动画和注释]

Answer 2

这不是你要求的，而是我会这样做的两种方法之一：

这里的主要想法是使横幅成为绝对定位的 div（不是绝对定位在页面上，尽管你也可以这样做；它事实上可能会更好）。

首先将#content 区域设置为position:relative，但不要更改其他任何内容。这将创建一个新的堆叠上下文（子元素使用上/右/下/左以及相对于它的百分比）。

然后将banner-thing作为#content区域的子元素，设置如下：

position:absolute;
width:80%; height:100px; /*there are other ways to set the height and width*/
bottom:100%; /*this puts it at the top*/
/*you can also use bottom:105% or bottom:90% or other things, or if you really
  want to use non-relative units like px, you can create a third nested div that is
  relatively positioned by whatever px amount*/

Answer 3

在这种情况下，负边距将是一个更优雅的解决方案（修订版 jsFiddle）。请注意，我必须将 #eee 背景移至 div#main，否则它会覆盖在 div#top 的背景上。

作为一般经验法则，我还建议避免相对定位，除非绝对必要 - 这通常会导致旧版本 IE 中的 z-index 问题。

Answer 4

我终于解决了这个问题，很简单：

   position: relative;
   bottom: 200px;
   margin-bottom: -200px;

神奇！ :)