使用絕對和相對位置來配置動態邊欄

我對使用絕對和相對定位有點困惑。基本上我有一個有大約4格的邊欄。使用絕對和相對位置來配置動態邊欄

我希望div 3始終位於每個頁面的相同位置，偶爾會丟失div 1或div 2，從而將div 3拉起。

我試着添加位置：相對於側邊欄和位置：絕對到div 3.這將它放在側欄上的正確位置，但它使得div 3與其他div重疊。

我在這裏錯過了什麼？

佈局的人感到困惑：

<div id='sidebar'> 
     <div id='div1'></div> 
     <div id='div2'></div> 
     <div id='div3'></div> 
     <div id='div4'></div> 
</div>

來源

2012-06-21 Rick Donohoe

那應該如何絕對定位工作 - 絕對定位的元素從內容流中除去，並且不佔用空間 - 所以它不能將元素向下推。

你將需要使用某種佔位符，或想出一些使用邊距的東西。我不知道你的元素如何需要放置，但如果div3始終是，比方說，400px從頂部，你爲什麼不去做這樣的：

<div id='sidebar'> 
    <div style="height:400px"> 
     <div id='div1'></div> 
     <div id='div2'></div> 
    </div> 
    <div id='div3'></div> 
    <div id='div4'></div> 
</div>

這樣，你可以隨意隱藏div1和div2，根本不需要使用絕對定位。

來源

2012-06-21 13:53:23 egasimus

我試圖用CSS，因爲它實際上是塊在Drupal的側邊欄，這使得這比剛剛添加幾行（更改主題模板移動塊等）更難。儘管如此，我還是會試試看。好的回答+1 –

我只是想用知名度造型隱藏＃div1,2,4並沒有動任何的其他分區的

到這裏看看：http://jsfiddle.net/hq6LM/10/

這樣做的原因是因爲如果你風格使用可見性它仍然保留它的塊屬性和div的不會被提升，因爲他們仍然存在只是看不見的。

希望這會有所幫助。

來源

2012-06-21 13:58:04 Casualbot

啊，但你看看是否有遺漏，那麼就不會有任何實際的內容讓'可見'。如果他們只是隱藏，那麼這將是一個很好的解決方案。 –

使用絕對和相對位置來配置動態邊欄

回答

相關問題