Почему не работает z-index?

Question

[алексей]

Почему не работает z-index у .sub-menu1?
Нужно, чтобы меню выезжало из под header.

<div class="header clearfix">
<div class="container">
    <div class="logo"></div>
    <div class="menu-right"></div>

    <div class="menu-center">
      <ul class="menu1">
        <li class="men1"><a href="#">Item</a> </li> 
                               <div class="submenu1"></div>
     </ul> 
    </div>
</div> 
</div>

.container {
 width: 1140px;
 margin: 0 auto;
}

.clearfix::after {
 content: "";
 display: table;
 clear: both;
}

.header {
 width: 100%;
 height: 108px;
 background-color: #262626;
 margin: 0;
 position: relative;
 z-index: 1;
}


.logo {
 width: 143px;
 height: 100%;
 float: left;
 background: url("logo.png") no-repeat 50% 50%;
}

 .menu-right {
 width: 143px;
 height: 100%;
 float: right; 
 line-height: 108px;
 text-align: center;
}

.menu-center {
 height: 100%;
 margin-left: 153px;
 line-height: 108px;
 padding-left: 89px;
}

.submenu1 {
display: block;
width: 100%;
height: 80px;
background-color: grey;
overflow: hidden;
position: absolute;
left: 0;
top: 28px;
transition: 1s;
z-index: 100;
}

.men1:hover + .submenu1 {
transform: translateY(50px);
}

Comments

[Артём Ведищев]

Твой код: https://jsfiddle.net/vbn3hp5w/
А что должно было быть?

Answer 1

[zRrr]

Сделайте одинаковый position у header и submenu1.
Было похожая проблема, решил, поставив одинаковое значение свойства position.

Comments

[MarcoBot]

Ты меня просто выручил!

Answer 2

[devstudent]

потому что оно внутри header ваше субменю, у него не может быть индекс выше , чем у родителя, хоть 100500 выставьте, не сработает, только выше чем у других элеметнов того же уровня, что и субменю.

Comments

[алексей]

Но если вынести из родителя, то как его через hover на ссылку в меню зацепить?
Вывел div после header, но он все-равно перекрывает...

[devstudent]

алексей: в таких случаях цепляют ховер джаваскриптом. но вы попробуйте сначала расставить z-индексы внтури хидера, может получится

[алексей]

devstudent: По поводу самой меню наверное и правда придется другими методами. Но почему перекрывает все-равно не пойму. Поставил div вообще отдельно, то есть у него родитель общий с хидером, поставил всем блокам в хидере z-index: 1 и relative. И без толку, не реагирует.

[devstudent]

ну если див ВНЕ хидера, то поставьте ему z-индекс ВЫШЕ чем у хидера. какой смысл ставить одинаковые z-index: 1 тогда. тогда выше будет тот элемент, чкто ниже в дереве DOM.

[алексей]

devstudent: 100 ему стоит, хидеру и всему что внутри хидера 1

[devstudent]

алексей: ну тогда делайте фиддл )) , в чем-то другом значит причина