Question

我希望我的Bootstrap下拉菜单在导航栏下方显示，但它似乎并不尊重 z-index 样式。

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

<nav>  <ul> <li> <ul>  ...

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

＆＃13;
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

为什么堆叠不适合我？

Answer 1

它不是导航的背后，因为它是导航的孩子。孩子总是高于其父母。如果你想让它在导航器后面，它必须在导航器的单独容器中。虽然，我想知道为什么你想让它首先落后于导航......？

无论如何，子节点总是继承父节点的z-index。如果父母高于某事，他的孩子也会高于所说的东西。你只能决定哪一个重叠哪个兄弟（等于嵌套）

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

绝对不推荐。

Answer 2

你误解了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>

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

2 个答案: