如何使粘性页脚不与其他div重叠

Question

我遇到这个问题，粘性页脚在浏览器中大量放大时会与页面上的其他div重叠。反正是不是让它与其他div重叠并仍然像粘性页脚一样起作用？

这是HTML：

<div id = "mainWrapperDiv"> 
    <div id = "mainDiv">
        <div class = "test1div"> testing </div> 
    </div>
   </div>
<div id = "footerDiv">
</div>

这是css：

*
{
    padding:            0px;
    margin:             0px;
}

body, html
{
    height:             100%
}

div
{
    border:             1px solid;
    overflow:           hidden;
} 

#mainWrapperDiv 
{
    min-height:         100%;  
    height:             100%; 
    margin-bottom:      -200px;
}  

#mainDiv  
{

    border:             1px solid;
    margin:             0px auto 0px auto; 
    width:              1000px;
    background:         lightgreen;  
    overflow:           hidden;
}

#mainDiv div.test1div
{ 
    width:              20em;
    height:             20em;
    float:              left;
} 

#mainDiv:after
{
    content:            ".";
    height:             0px;
    display:            block;
    clear:              both;
    visibility:         visible;
}

#footerDiv 
{
    height:             200px;
    width:              100%;
    clear:              both;
    background:         lightblue;
    overflow:           hidden;
}