如何管理使用 z-index 交错的层答案

【问题标题】：How to manage layers interleaved using z-index如何管理使用 z-index 交错的层
【发布时间】：2017-10-11 13:43:14
【问题描述】：

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

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 专家，也许有更好的方法来实现这种设计，但我不明白为什么下拉菜单没有覆盖所有组件？

【问题讨论】：

标签： html css twitter-bootstrap styles z-index

【解决方案1】：

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

header {
  z-index: 301;
}

navbar{
  z-index: 300;
}

玩得开心

编辑：在准确了解您想要什么之后，you can take a look at this

【讨论】：

在这种情况下，输入的顶部无法聚焦....因为标题的透明图像在它上面....

【解决方案2】：

您需要从标题中删除 z-index 并将 z-index 添加到导航栏，如下所示

header {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAABkCAYAAAB+UVSPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAEZUlEQVR4Xu3XIY5dRxiE0UfihRhkA/YGQgwshWRDExhsltVez8iGTbuqwDnSp3m6/Nd0vR4AIO/f/37/AKrcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYtzr8x+fHkmSlO356+/n+5cvksp93OLpRnWv1/Pn10eSJEmSEhkgkiRJkmIZIJIkSZJiGSCSJEmSYhkgkiRJkmIZIJIkSZJiGSCSJEmSYhkgkiRJkmIZIJIkSZJiGSCSJEmSYhkgkiRJkmIZIJIkSZJiGSCSJEmSYhkgkiRJkmIZIJIkSZJiGSCSJEmSYhkgkiRJkmIZIJIkSZJifQyQN0mSFO/jH/Hpu6RsbjHc690jSZKyPd/+ed7e3iSV+7jF043qYs8jSZLi/fj//Q9Q9+sWz3eqKx0/SpKkyxkgsMEAiXf8KEmSLmeAwAYDJN7xoyRJupwBAhsMkHjHj5Ik6XIGCGwwQOIdP0qSpMsZILDBAIl3/ChJki5ngMAGAyTe8aMkSbqcAQIbDJB4x4+SJOlyBghsMEDiHT9KkqTLGSCwwQCJd/woSZIuZ4DABgMk3vGjJEm6nAECGwyQeMePkiTpcgYIbDBA4h0/SpKkyxkgsMEAiXf8KEmSLmeAwAYDJN7xoyRJupwBAhsMkHjHj5Ik6XIGCGwwQOIdP0qSpMsZILDBAIl3/ChJki5ngMAGAyTe8aMkSbqcAQIbDJB4x4+SJOlyBghsMEDiHT9KkqTLGSCwwQAJ97x+AgOVhW80idDhAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
  position: relative;
  height: 80px;
}

navbar{
   z-index: 100;
}

【讨论】：

正如您在 plunker 示例中所见，标题应位于过滤栏上方。标题包含一个带有白色矩形的背景图像，该矩形必须位于过滤器栏上方。这就是为什么我在标题上放一个 z-index