位置绝对和溢出隐藏重叠内容

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; 
} 

必须溢出添加：隐藏工作