位置絕對和溢出隱藏重疊內容

Question

我有四個div在一行然後在這個頁腳下，但是頁腳移到圖片後面而不是直接在div下面。

我認爲這是與定位有關，但不能解決如何停止重疊。

任何幫助，將不勝感激，

乾杯

<div id="image-nav"> 
    <div id="image-nav1"> 
     education 
    </div> 
    <div id="image-nav2"> 
    repairs 
    </div> 
    <div id="image-nav3"> 
    finance 
    </div> 
    <div id="image-nav4"> 
    gold 
    </div> 
</div> 

<div id="footer"> 
<div class="wrapper"> 
<div id="footer-wrap"> 
     <div class="section group"> 
        <div class="col span_1_of_3"> 
        links 
        </div> 
        <div class="col span_1_of_3"> 
        details 
        </div> 
        <div class="col span_1_of_3"> 
        newsletter 
        </div> 
     </div> 
</div> 
</div> 
</div> 


#image-nav{ 
    width:100%; 
    background:#C03; 
    position:relative; 
    } 
#image-nav1{ 
    background:#0FF; 
    width:25%; 
    position: absolute; 
    } 
#image-nav2{ 
    background:#069; 
    width:25%; 
    position: absolute; 
    left: 25%; 
    } 
#image-nav3{ 
    background:#FF0; 
    width:25%; 
    position: absolute; 
    right: 25%; 
    } 
#image-nav4{ 
    background:#999; 
    width:25%; 
    position: absolute; 
    right: 0; 
    } 

#footer{ 
    width:100%; 
    background:#F9F; 
    } 

編輯 - 添加溢出：隱藏到父DIV使得它disapear和頁腳沒有被固定在底部

Answer 1

更新回答

#footer{ 
      position: absolute; 
      bottom: 0; 
      } 

試試這個修復底部固定。 嘗試將id更改爲頁腳元素它是有用的。或者使用預定義的clearfix到頁腳div。

jsfiddle.net/pgamj71f/5

Answer 2

來解決這個重疊的父元素必須有一組寬度和高度。

#image-nav{ 
height:18px; 
} 

必須溢出添加：隱藏工作