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

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

编辑 - 将overflow:hidden 添加到父div 使其消失并且页脚未固定到底部

Answer 1

要修复这种重叠，父元素必须设置宽度和高度。

#image-nav{
height:18px;
}

必须添加溢出：隐藏才能工作

Answer 2

更新答案

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

试试这个修复底部固定。 尝试将 id 更改为页脚元素，这很有用。或者对页脚 div 使用预定义的 clearfix。

jsfiddle.net/pgamj71f/5