頁腳問題與Twitter Bootstrap - z-index的解決方案？

Question

我的模板是基於this。爲了保持頁腳「粘性」，下面的CSS規則的使用：

/* Sticky footer styles 
-------------------------------------------------- */ 
html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 

    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 

/* Custom page CSS -------------------------------------------------- */ 
/* Not required for template or sticky footer method. */ 

body > .container { 
    padding: 60px 15px 0; 
} 
.container .text-muted { 
    margin: 20px 0; 
} 

.footer > .container { 
    padding-right: 15px; 
    padding-left: 15px; 
} 

code { 
    font-size: 80%; 
} 

然而，當我包括表分頁重疊頁腳。我認爲這是由於DOM規則的工作方式。

有使用z-index修復：

.footer { 
    z-index: 4; 
} 

是最好的辦法？

如果你看看here +改變'顯示條目到100'你會明白我的意思。

Answer 1

在footer上使用z-index是解決方案。

.footer { 
    z-index: 2; 
}