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

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使其消失并且页脚未固定到底部

Answer 1

更新了答案

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

尝试这个来修复底部修复。 尝试将id更改为页脚元素它是有用的。或者使用预定义的clearfix到页脚div。

jsfiddle.net/pgamj71f/5

Answer 2

要修复此重叠，父元素必须具有设置的宽度和高度。

#image-nav{
height:18px;
}

必须为溢出添加

：隐藏起作用