Имеется данная структура разметки и стилей.Если навести на Hello, можно увидеть drop_menu со значением 2,свойства z-index которое перекрывается блоком content со значением z-index 1.Вопрос знатокам, почему не работает z-index ?
body{
box-sizing: border-box;
margin: 0;
}
.header{
height: 50px;
background: #000;
padding: 5px 15px;
position: fixed;
max-width:100%;
width: 100%;
z-index: 1;
}
.nav{
margin-left: 150px;
position: relative;
}
.drop_down_menu{
left: auto;
display: none;
position: absolute;
top: 15px;
left: 5px;
border-radius: 2px;
z-index: 2;
}
.left:hover .drop_down_menu{
display: block;
}
.hello{
color: red;
}
.sidebar_left{
position: fixed;
top: 65px;
left: 0;
background: #ff0000;
height: 100vh;
width: 150px;
z-index: 1;
}
.sidebar_right{
position: fixed;
top: 65px;
right: 0;
background: #00ff00;
height: 100vh;
width: 150px;
}
.content{
position: absolute;
top: 65px;
left: 155px;
background: #ff00ff;
height: 100vh;
width: 448px;
z-index: 1;
}
<div class="header">
<ul class="nav">
<li class="left">
<a href="#" class="hello">Hello</a>
<ul class='drop_down_menu'>
<li><a href="#">lorem1</a></li>
<li><a href="#">lorem2</a></li>
<li><a href="#">lorem3</a></li>
<li><a href="#">lorem4</a></li>
</ul>
</ul>
</div>
<div class="sidebar_left">
</div>
<div class="sidebar_right">
</div>
<div class="content">
</div>