div高於絕對div和溢出

Question

我有一個設置，我有一個絕對div設置爲左側位置和右側位置以允許液體佈局。這一切都很好地工作，但後來我遇到了一個問題，我有一個div下面有一些副本。問題是，副本的div應該低於絕對定位div。現在它出現在它上面，這是不正確的。

我經常看到這個問題，因爲在孩子被設置爲絕對後摺疊父母的div，但爲了解決這個問題，我使用清除所有或溢出：父母隱藏，它停止發生崩潰。這一次圍繞它的不崩潰，但它顯示我的底部股利高於頂部股利。

這裏是一個jsfiddle鏈接向您展示我的代碼。

Answer 1

我不知道爲什麼你認爲這會奏效。你有容器footer。這包含兩個子div-footerWrapper和footerTerms。

FooterWrapper絕對定位。所以它被排除在所有其他元素的流動之外。 footerTerms是footerWrapper的兄弟，自然地從其父，頁腳的左上角開始。

爲什麼footerWrapper絕對定位好像你想讓它影響你的頁面內容流？使其相對或保持靜態。

http://jsfiddle.net/mrtsherman/7cNf7/3/

<div class="footer"> 
    <div class="footerWrapper"> 
    </div> 
    <div class="footerTerms"> 
    </div> 
</div> 

Answer 2

我有probabaly錯誤理解你想做的事，但如果你想要一個液態佈局爲什麼不使用這樣的事情：

CSS：

<style type="text/css"> 
    #footerWrapper { 
     background: #ccc; 
    } 
    #footerWrapper .section { 
     float: left; 
     width: 33%; 
    } 
    .clear:after { 
     content: " "; 
     display: block; 
     clear: both; 
     visibility: hidden; 
     line-height: 0; 
     height: 0; 
    } 
    html[xmlns] .clear { 
     display: block; 
    } 
    * html .clear { 
     height: 1%; 
    } 
</style> 

HTML：

<div id="footerWrapper"> 
    <div class="clear"> 
     <div class="section"> 
      Footer section 1<br /> 
      Footer section 1<br /> 
      Footer section 1 
     </div> 
     <div class="section"> 
      Footer section 2<br /> 
      Footer section 2<br /> 
      Footer section 2<br /> 
      Footer section 2 
     </div> 
     <div class="section"> 
      Footer section 3<br /> 
      Footer section 3<br /> 
      Footer section 3 
     </div> 
    </div> 
    <div class="terms"> 
     Terms 
    </div> 
</div> 

然後，如果您想將頁腳掛到頁面的右側，例如您可以編輯#footerWrapper CSS並給它一個寬度和浮點數。