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

问题在于，如果我设置left:0px，LevelCnt_1会覆盖在页眉上方。为什么会出现这种情况？

- Toni Michel Caubet

---

尝试将 position:relative 应用于标题。 - Alex

z-index只有在元素被定位时才起作用。尝试在CSS中添加一个position语句，看看会发生什么。 - Kyle

Answer 1

z-index 只有在使用 position:relative, absolute 或 fixed 时才有效。因此，请设置你的 header 和 nav DIV 的 position:relative。

像这样：

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
}

- sandeep