为什么z-index不能处理定位元素？

Question

我希望我的Bootstrap下拉菜单显示在导航栏下方,但它似乎不尊重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.如果父母高于某事,他的孩子也会高于所说的东西.你只能决定哪一个重叠哪个兄弟(等于嵌套)

但是,是的,而不是帮助你使用代码,我宁愿建议你不要尝试这个.这几乎不可能在响应式页面中进行维护(适应不同的屏幕大小),因为您必须将子导航元素放在实际导航栏之外,只是根据另一个容器将它们定位.

绝对不推荐.