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

Question

消除位置造成的差距的推荐和最优雅的方法是什么:相对的？

我有一个头版，希望在标题和内容部分上方放置一个横幅，但使用位置:relative生成一个空区域.

参见示例(，我希望文本位于红色框的下方)：

http://jsfiddle.net/Ru2CT/

我知道我可以创建另一个相对位置div作为我的文本的父级，但我仍然会有差距，但在内容部分和页脚之间.

有什么想法吗？)

Answer 1

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

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

做魔术！:)

Answer 2

取出灰色盒子的全部内容，并将其放置在div中(拉伸到相同大小)。然后用相对的位置将这个盒子向上移动。这将有移动文本与红色“滑块”/banner的东西，而不移动灰色背景的效果。

我们开始：http://jsfiddle.net/4BLFJ/动画和注解

Answer 3

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

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

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

然后将横幅-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*/