Question

推荐的＆amp;最优雅的方式摆脱位置造成的差距：相对？

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

参见示例（我希望文本位于红色框下方）：

http://jsfiddle.net/Ru2CT/

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

有什么想法吗？：）

Answer 1

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

我们走了： http://jsfiddle.net/4BLFJ/ [动画和注释]

Answer 2

这不是你问的问题，而是我会这样做的两种方式之一：

这里的主要想法是将横幅设为一个绝对定位的div（不是绝对定位在页面上，尽管你也可以这样做;它实际上可能更好）。

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

然后将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

在这种情况下，负边距将是一个更优雅的解决方案（revised jsFiddle）。请注意，我必须将#eee背景移动到div＃main，否则它将叠加在div＃top的背景上。

作为一般的经验法则，除了绝对必要之外，我还建议避免相对定位 - 在旧版本的IE中经常会导致z-index头痛。

Answer 4

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

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

魔法！：）

如何摆脱与位置的差距：相对横幅

4 个答案: