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

Question

我希望我的 Bootstrap 下拉菜单出现在下方导航栏，但它似乎不符合 z-index风格。

一般来说，我有这样的布局：

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

<nav> 和 <ul> 都有 position 样式。这是完整的代码：

.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

它不在导航后面，因为它是导航的 child。 child 总是高于它的 parent。如果你想让它在导航后面，它必须在一个独立于导航的容器中。虽然，我想知道为什么您首先希望它位于导航后面...？

无论如何，child 总是继承 parent 的 z-index。如果parent高于某物，它的children也会高于所说的东西。只有当他们是兄弟（平等嵌套）时，你才能决定哪个重叠哪个

但是，是的，我宁愿建议您不要尝试此操作，而不是帮助您编写代码。这几乎不可能在响应式页面（适应不同的屏幕尺寸）中维护，因为您必须将 sub-navigation 元素放在实际导航栏之外，只能根据另一个容器正确定位它们。

绝对不推荐。

Answer 2

你误会了z-index。它指定该元素相对于它所属的堆栈上下文的索引。

准确的说，因为你在nav上使用了z-index: 2，所以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>

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

Why isn't z-index working on positioned elements?

html

css

z-index

twitter-bootstrap