I have this 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 header if I set left:0px
why is this happening?
z-index
only work with position relative, absolute & fixed
. So, give position:relative
to 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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With