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>

來源

2011-09-27 acctman

我真的覺得一個人必須要看到HTML來回答這個問題。 –

@RichardJPLeGuen不是，他們只是div的div的內容應該不重要。這個問題可以用3個空的div與設置ID的 – acctman

複製好，但它們在HTML文檔中的位置？哪一個是第一個還是第二個或最後一個？是否還有其他非靜態定位元素？ –

應用z-index屬性爲您的頁腳：

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

來源

2011-09-27 15:19:47

沒有工作仍然重疊...例如，您可能必須增加main_wrapper高度到900取決於瀏覽器的大小。

– acctman

適合我。事實上，即使沒有z索引，由於自然文檔流，它也可以正常工作。 –

你一定在做別的事情。 –

一種更好的方式來處理這個問題是一個固定的定位應用到頁腳，使其總是在屏幕的底部。這裏是你的代碼的jsfiddle：

http://jsfiddle.net/bnryh/

來源

2011-09-27 19:21:06

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

來源

2011-09-27 19:50:30 acctman

div覆蓋定位？

回答

相關問題