div覆盖定位？

问题描述：

有什么办法可以防止main_wrapper重叠页脚？页脚必须保持并且位置：绝对，以便它保持在浏览器底部刷新。div覆盖定位？

#page_contain { 
    min-height: 100%; 
    position: relative; 
} 

#main_wrapper { 
    width: 950px; 
    height: 800px; 
    margin: 0 auto 25px auto; 
    position: relative; 
    border: 1px solid #000; 
} 

#footer { 
    position:absolute; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
    text-align: center; 
    font-family: Verdana; 
}

HTML

<div id="page_contain"></div> 
<div id="main_wrapper"></div> 
<div id="footer"> 
line 1 <br /> 
line 2 <br /> 
line 2 <br /> 
line 2 <br /> 
line 2 <br /> 
line 2 <br /> 
</div>

我真的觉得一个人必须要看到HTML来回答这个问题。 –

@RichardJPLeGuen不是，他们只是div的div的内容应该不重要。这个问题可以用3个空的div与设置ID的 – acctman

复制好，但它们在HTML文档中的位置？哪一个是第一个还是第二个或最后一个？是否还有其他非静态定位元素？ –

答

应用z-index属性为您的页脚：

#footer{ 
    [...] 
    z-index: 50; 
}

没有工作仍然重叠...例如，您可能必须增加main_wrapper高度到900取决于浏览器的大小。

– acctman

适合我。事实上，即使没有z索引，由于自然文档流，它也可以正常工作。 –

你一定在做别的事情。 –

答

一种更好的方式来处理这个问题是一个固定的定位应用到页脚，使其总是在屏幕的底部。这里是你的代码的jsfiddle：

http://jsfiddle.net/bnryh/

答

#page_contain { 
    min-height: 100%; 
    position: relative; 
} 
#main_wrapper { 
    width: 950px; 
    height: 100%; 
    margin: 0 auto 25px auto; 
    position: relative; 
    border: 1px solid #000; 
    padding-bottom:100px; 
} 
#footer { 
    clear:both; 
    position:absolute; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
    text-align: center; 
    font-family: Verdana; 
}

相关推荐