Z-index not respected

Question

I have these styles:

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

the problem is that visually .LevelCnt_1 stays on top of the header if I set left:0px

Why is this happening?

Answer 1

z-index only works with position relative, absolute & fixed . So give position:relative your header & nav DIV.

Like this

 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 only works with absolute position. The float is also the wrong box context for this.