Почему z-index не работает с позиционируемыми элементами?

Question

Я хочу, чтобы появилось выпадающее меню Bootstrap под navbar, но похоже, что он не соответствует z-index.

Грубо говоря, у меня есть макет, как это:

<nav>   <!-- z-index: 2; --> 
    <ul> 
    <li> 
     <ul> <!-- z-index: 1; --> 
     ... 

И <nav> и <ul> имеют позиции стили. Вот полный код:

.nav-submenu { 
 
    top: 20px; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
.navitem-left { 
 
    position: relative; 
 
} 
 
nav { 
 
    height: 72px; 
 
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.10); 
 
    padding-top: 30px; 
 
    position: fixed; 
 
    z-index: 2; 
 
    width: 100%; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li class="navitem-left"> 
 
     <a href="#" class="dropdown-toggle" id="menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">CLICK ME!</a> 
 
     <ul class="dropdown-menu nav-submenu" aria-labelledby="menu1"> 
 
     <li> 
 
      <a href="#">Why aren't I behind the nav?</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Почему не укладывание работает для меня?

Answer 1

Вы неправильно поняли z-index. Он указывает индекс этого элемента относительно контекста стекирования, которому он принадлежит.

Точно, так как вы используете z-index: 2 на nav, то ul принадлежит к контексту штабелирования, установленном nav!

z-index Удалить, что остановить nav от создания контекста штабелирования, установите отрицательный z-index к ul, и использовать не прозрачный фон.

О, и в прошлом году CSS WD decided, что элементы с фиксированным позиционированием всегда устанавливают контекст стекирования, поэтому используйте другое позиционирование.

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; 
 
.nav-submenu { 
 
    top: 20px; 
 
    position: absolute; 
 
    z-index: -10; 
 
} 
 
.navitem-left { 
 
    position: relative; 
 
    float: left; 
 
} 
 
nav { 
 
    height: 72px; 
 
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.10); 
 
    padding-top: 30px; 
 
    position: absolute; 
 
    width: 100%; 
 
    background: #fff; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li class="navitem-left"> 
 
     <a href="#" class="dropdown-toggle" id="menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">CLICK ME!</a> 
 
     <ul class="dropdown-menu nav-submenu" aria-labelledby="menu1"> 
 
     <li> 
 
      <a href="#">Why aren't I behind the nav?</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

Это не походка на море, потому что это ребенок навигация. Ребенок всегда выше своего родителя. Если вы хотите, чтобы он находился за навигацией, он должен быть в отдельном контейнере с навигатора. Хотя, мне было бы интересно, почему вы хотите, чтобы это было за навигацией в первую очередь ...?

В любом случае, ребенок всегда наследует z-индекс родителя. Если родитель над чем-то выше, его дети также будут выше сказанного. Вы можете решить, какой из них накладывается, когда они братья (равное гнездование)

Но да, вместо того, чтобы помогать вам с кодом, я бы рекомендовал вам не попробовать. Это почти невозможно поддерживать на чувствительных страницах (приспосабливаясь к разным размерам экрана), так как вам придется поместить элементы суб-навигации вне фактической панели навигации, только чтобы расположить их вправо в соответствии с другим контейнером.

Определенно не рекомендуется.