html - 如何使用z-index管理交错的图层

我在管理多个交错层时遇到一些困难。

I reproduced my issue in this Plunker example

  <body>
<header>
  <nav class="navbar">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
  </nav>
</header>
<nav class="navbar row filter">
  <form class="form-inline">
    <input name="search" class="form-control" type="text" size="30"/>
  </form>
</nav>

header {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
  position: relative;
  height: 80px;
  z-index: 100;
}

header .navbar {
  padding:0;
}

.dropdown-menu {
  z-index:300;
}

.filter {
  margin-top:-20px;
  background-color: black;
}

.filter form {
 z-index:200;
}

如果我从最远的元素开始，我应该有：

过滤棒容器
标头容器
过滤条内容（输入）
标头内容（菜单）

所以我指定：

标头带有z-index 100，可以将其悬停在过滤器栏上
带有z-index 200的过滤器栏内容，将其悬停在标题上
带有z-index 300的下拉菜单可以遍历所有组件...此组件不起作用，它停留在过滤器栏内容下。...为什么？

我不是CSS方面的专家，也许有更好的方法可以实现此设计，但是我不明白为什么下拉菜单不能覆盖所有组件？

最佳答案

简单:)您只需要在标题和导航栏之间调整z-index。

header {
  z-index: 301;
}

navbar{
  z-index: 300;
}

玩得开心
编辑：完全了解您想要的内容后，you can take a look at this

关于html - 如何使用z-index管理交错的图层，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43934311/