z-index的不尊重

Question

我有這樣的風格：

header{ 
    width:400px; 
    min-height:640px; 
    background:#9B9B76; 
    float:left; 
    z-index:1000; /*high*/ 
} 
nav{ 
    width:100%; 
    z-index:1001; /*highest*/ 
} 

nav a{ 
    float:left; 
    width:80%; 
    padding:10%; 
    font-size:20px; 
} 
nav a:hover{ 
    background:#997548; 
} 
.LevelCnt_1{ 
    float:left; 
    width:300px; 
    z-index:1;  /*Lowest*/ 
    position:absolute; 
    left:400px; 
    background:#baafa9; 
} 

的問題是，在視覺上.LevelCnt_1停留在頭頂部，如果我設置left:0px

爲什麼會出現這種情況？

Answer 1

z-index只能與position relative, absolute & fixed一起使用。所以，給你的header & nav DIV。

像這樣

header{ 
    width:400px; 
    min-height:640px; 
    background:#9B9B76; 
    float:left; 
    z-index:1000; /*high*/ 
position:relative 
} 
nav{ 
    width:100%; 
    z-index:1001; /*highest*/ 
position:relative 
} 

Answer 2

z-index僅適用於絕對位置。一個浮點數也是這個錯誤的盒子上下文。