z-index仍然覆蓋

Question

我在我的主要內容窗口頂部顯示一個小小的問題。

嘗試移動頁邊距，使主頁內容超過100px，頁腳重疊100px並呈現到窗口底部。

如果有，還有其他方法可以做到這一點嗎？

感謝

#wrapper:before { 
 
    content: ''; 
 
    float: left; 
 
    height: 100%; 
 
} 
 

 
#wrapper { 
 
    height: 100%; 
 
    background-color: black; 
 
} 
 

 
#header { 
 
    z-index: 1; 
 
    height: 250px; 
 
    text-align: center; 
 
    background: url(../images/bg02.jpg); 
 
    border-bottom: 10px solid #01A9DC; 
 
} 
 

 
#main { 
 
    z-index: 2; 
 
    margin: -100px auto -50px auto; 
 
    width: 80%; 
 
    background-color: white; 
 
    min-height: 400px; 
 
} 
 

 
#footer { 
 
    z-index: 1; 
 
    border-top: 10px solid #01A9DC; 
 
    background: url(../images/bg02.jpg); 
 
} 
 

 
#footer:after { 
 
    z-index: 1; 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

<div id="wrapper"> 
 

 
    <div id="header"> HEADER<br> </div> 
 

 
    <div id="main"> MAIN CONTENT </div> 
 

 
    <div id="footer"></div> 
 

 
</div>

Answer 1

的z-index有很多小動作。我認爲它大致只適用於某些情況下，如定位（relative或absolute）元素或元素與opacity更改。我通過在您的#main元素中添加position: relative來使您的示例在此處有效。

#wrapper:before { 
 
    content: ''; 
 
    float: left; 
 
    height: 100%; 
 
} 
 

 
#wrapper { 
 
    height: 100%; 
 
    background-color: black; 
 
} 
 

 
#header { 
 
    z-index: 1; 
 
    height: 250px; 
 
    text-align: center; 
 
    background: url(../images/bg02.jpg); 
 
    border-bottom: 10px solid #01A9DC; 
 
} 
 

 
#main { 
 
    z-index: 2; 
 
    position: relative; 
 
    margin: -100px auto -50px auto; 
 
    width: 80%; 
 
    background-color: white; 
 
    min-height: 400px; 
 
} 
 

 
#footer { 
 
    z-index: 1; 
 
    border-top: 10px solid #01A9DC; 
 
    background: url(../images/bg02.jpg); 
 
} 
 

 
#footer:after { 
 
    z-index: 1; 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

<div id="wrapper"> 
 

 
    <div id="header"> HEADER<br> </div> 
 

 
    <div id="main"> MAIN CONTENT </div> 
 

 
    <div id="footer"></div> 
 

 
</div>

Answer 2

Z-索引爲奇數。 CSS屬性position在z索引的工作方式中起着重要作用。

如果您將position: relative;添加到#main您將看到所需的效果。

我會說玩不同的位置和z-索引（以及嵌套這些元素），你會很快弄清楚它有多奇怪。