橙色条下方的代码显示在网页的橙色条上方

Question

我的网页上有一个橙色栏，它是幻灯片控件的主机。 橙色容器div设置为扩展主页div的外部宽度，如下所示：

http://jsfiddle.net/Xh8uL/2

但是，当我尝试向网页添加更多内容时，任何其他内容都会直接显示在橙色栏上方，而不是在其下方。我可以在橙色条下方显示更多内容的唯一方法是将橙色条的位置更改为相对（从绝对值） - 这会使橙色条的整个目的失效 - 以及绝对设置。

对于我正在使用的实现代码，请参阅我的第一个问题： Horizontal Bar extending outer container

<小时/> 下面是我希望看起来像这样的视觉效果：

http://jsfiddle.net/Xh8uL/5

但这就是它实际出现的方式（非常糟糕）：

如何让我的内容显示在橙色栏下方？

---

条形码之后没有内容的小提琴：here
在条形码后添加 内容：here

Answer 1

将padding-top添加到paragraph。

p {
   padding-top: 200px;    
}

工作小提琴：here 。

Answer 2

查看this jsFiddle

您编码的方式会干扰页面的流动...绝对定位的元素将始终位于流程中移动的任何其他元素之上