橙色欄下方的代碼出現在網頁的橙色欄上方

我的網頁上有一個橙色欄，它是幻燈片控制的主機。橙色div容器被設置爲延伸的主網頁div的外寬度，如下所示：橙色欄下方的代碼出現在網頁的橙色欄上方

http://jsfiddle.net/Xh8uL/2

然而，當我嘗試更多的內容添加到我的網頁時，任何進一步的內容直接顯示上述橙色的酒吧，而不是它下面。唯一可以讓更多內容出現在橙色欄下方的唯一方法是將橙色欄的位置更改爲相對（從絕對） - 這違背了橙色欄的整體目的 - 以及絕對設置。

對於我使用的，看到我的第一個問題實現代碼： Horizontal Bar extending outer container

下面是一個視覺的我怎麼會喜歡這個樣子：

http://jsfiddle.net/Xh8uL/5

但這它是如何實際出現（非常差）：

enter image description here

如何讓我的內容顯示在橙色欄下方？

小提琴沒有酒吧後內容：here
小提琴與內容欄後：here

來源

2012-07-23 Arrow

創建的jsfiddle內移動任何其他元素？ – 2012-07-23 12:18:34

它對我來說很紅。 – 2012-07-23 12:19:27

@AhmadAlfy JSFiddle _without_ content after bar：http://jsfiddle.net/Xh8uL/2/和JSFiddle _with_ content後面的內容：http://jsfiddle.net/Xh8uL/5/ – Arrow 2012-07-23 12:21:45

添加padding-top到paragraph。

p { 
    padding-top: 200px;  
}

工作小提琴：here。

來源

2012-07-23 12:25:27

沒有冒犯，但不是這樣快速修復？我的意思是，對於其他單獨的div，跨度或p或其他任何，我將不得不添加padding-top：200px;到它。沒有更合適的解決方法嗎？ – Arrow 2012-07-23 12:27:40

@EvilCokeMachine'padding'有什麼問題？它有一個原因：定位你喜歡的元素。 – 2012-07-23 12:32:00

好的，謝謝。我只是覺得這有點奇怪。你知道...必須減少200px和所有.. – Arrow 2012-07-23 12:33:39

看看this jsFiddle

你的代碼將其與網頁的流量interfers的方式......絕對定位的元素會一直躺在上面的流程

來源

2012-07-23 12:30:33

橙色欄下方的代碼出現在網頁的橙色欄上方

回答

相關問題