html - オレンジ色のバーの下のコードが Web ページのオレンジ色のバーの上に表示される

Question

Web ページに、スライドショー コントロールのホストであるオレンジ色のバーがあります。以下に示すように、オレンジ色のコンテナー div は、メイン ページ div の外側の幅を拡張するように設定されています。

http://jsfiddle.net/Xh8uL/2

しかし、Web ページにさらにコンテンツを追加しようとすると、それ以上のコンテンツがオレンジ色のバーの下ではなく真上に表示されます。オレンジ色のバーの下に表示されるコンテンツを増やす唯一の方法は、オレンジ色のバーの位置を (絶対から) 相対的に変更することです。これは、オレンジ色のバーの目的全体と絶対設定を無効にします。

私が使用している実装コードについては、私の最初の質問を参照してください: 外側のコンテナーを拡張する水平バー

---

以下は、これがどのように見えるかを視覚的に示したものです。

http://jsfiddle.net/Xh8uL/5

しかし、これは実際に表示される方法です（非常に悪い）：

コンテンツをオレンジ色のバーの下に表示するにはどうすればよいですか?

---

バーの後のコンテンツなしのフィドル:ここバーの後の
コンテンツの フィドル:ここ

Answer 1

に追加padding-topしparagraphます。

p {
   padding-top: 200px;    
}

作業フィドル：ここ。

Answer 2

このjsFiddleを見てください

コーディングの方法がページの流れに干渉しています... 絶対配置された要素は、常にフロー内を移動する他の要素の上にあります