1

Имеется данная структура разметки и стилей.Если навести на 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>

      

1 ответ 1

1

У блока-родителя z-index 1, внутренние не работают. Можно вот так выйти из положения:

body {
  box-sizing: border-box;
  margin: 0;
}

.header {
  height: 50px;
  background: #000;
  padding: 5px 15px;
  position: fixed;
  max-width: 100%;
  width: 100%;
  z-index: 2;
}

.nav {
  margin-left: 150px;
  position: relative;
}

.drop_down_menu {
  left: auto;
  display: none;
  position: absolute;
  top: 15px;
  left: 5px;
  border-radius: 2px;
}

.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: #0000ff;
  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>

7

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.