Question

尝试将下拉菜单放置在顶部导航栏的后面，以便在出现下拉菜单的动画时，它似乎不是来自导航栏的顶部而是位于其下方。

我已经尝试过（尝试使用可操作性的词）解决这个问题，并且查看了堆叠顺序和上下文，并尝试了各种定位和z索引组合的组合，以期获得理想的结果，但是没有一个得到预期的结果。

请查看下面的代码或codepen here！

.l-topbar {
  height: 50px;
  width: 100%;
}

#nav-primary {
  background-color: #008ed0;
  background-image: linear-gradient(
    to bottom right,
    rgb(0, 114, 167),
    rgb(0, 149, 219)
  );
  left: 0;
  position: fixed;
  top: 0;
  z-index: 3;
}

.l-top-list > li {
  color: white;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.l-top-list > li > a {
  display: flex;
  position: relative;
}

.l-list > .btn:hover {
  background-color: #d50f67;
  color: #fff;
  cursor: pointer;
  transition: none;
}

.account {
  display: block;
  float: right;
  height: 100%;
}

.account > .btn {
  z-index: 3;
}

.account:hover .dropdown,
.account:focus .dropdown {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.dropdown {
  background-color: #fff;
  box-shadow: 0 12px 8px 0 rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.19);
  color: #d50f67;
  opacity: 1;
  position: absolute;
  right: 0;
  transform: translateY(-10em);
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s,
    z-index 0s linear 0.01s;
  visibility: visible;
  z-index: -2;
}

.dropdown > li > a {
  line-height: 50px;
  padding: 0 10px;
}

.icon {
  display: block;
  fill: white;
  height: 1.5em;
  padding: 13px;
  width: 1.5em;
}

.identity {
  float: left;
  height: 100%;
}

.logo {
  display: block;
  height: 2.5em;
  width: 2.5em;
  padding: 5px;
}

.l-list-info {
  float: left;
  padding: 16px 0 18px 10px;
}

<div id="nav-primary" class="l-topbar">
  <ul class="l-top-list identity">
    <li><img class="logo" alt="Logo" src="https://images.unsplash.com/photo-1561346120-851ea1e8776b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ"></img>
    </li>
    <li>
      <p class="l-list-info">Cartoon</p>
    </li>
  </ul>
  <ul class="l-list l-top-list account">
    <li class="btn">
      <p class="l-list-info">Donald Duck</p><svg class="icon" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path>
</svg>
      <ul class="l-list dropdown">
        <li class="btn"><a href="#">donald.duck@cartoon.co.uk</a></li>
        <li class="btn"><a href="#">Control Panel</a></li>
        <li class="btn"><a href="#">Change Cartoon</a></li>
        <li class="btn"><a href="#">Switch User</a></li>
        <li class="btn"><a href="#">Log Off</a></li>
      </ul>
    </li>
  </ul>
</div>

我很感谢所有帮助，但是，如果可能的话，请向我解释为什么会出错（堆栈顺序/上下文，CSS属性使用不当等）以及将来如何确定原因。 / p>

我也很欣赏这种类型的问题在出现许多变化之前已经问过很多次了。我已经阅读了其中许多内容，并尝试将修复程序应用于我的代码，但无济于事。

编辑：我只是想提到以下内容：我知道，如果我从＃nav-primary元素中删除z-index，并为其赋予绝对位置，并在dropdown元素上保留负z-index它消失在＃nav-primary元素后面。问题是我需要将＃nav-primary设置为固定位置，以便在下面添加内容并且用户滚动时，＃nav-primary会停留在所有内容的顶部，但下拉菜单需要显示在＃nav-下直到下拉菜单被激活

Answer 1

.l-topbar {
  height: 50px;
  width: 100%;
}

.content {
  background-color: tomato;
  position: absolute;
  top: 100px;
  left: 200px;
  height: 1000px;
  width: 600px;
  z-index: -1;
}

#nav-primary {
  background-color: #008ed0;
  background-image: linear-gradient(
    to bottom right,
    rgb(0, 114, 167),
    rgb(0, 149, 219)
  );
  left: 0;
  position: fixed;
  top: 0;
}

.l-top-list > li {
  color: white;
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.l-list > .btn:hover {
  background-color: #d50f67;
  color: #fff;
  cursor: pointer;
  transition: none;
}

.account {
  display: block;
  float: right;
  height: 100%;
}

.account:hover .dropdown,
.account:focus .dropdown {
  opacity: 1;
  visibility: visible;
  z-index: 3;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.dropdown {
  background-color: #fff;
  box-shadow: 0 12px 8px 0 rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.19);
  color: #d50f67;
  opacity: 1;
  position: absolute;
  right: 0;
  transform: translateY(-10em);
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s,
    z-index 0s linear 0.01s;
  visibility: visible;
  z-index: -2;
}

.dropdown > li > a {
  line-height: 50px;
  padding: 0 10px;
}

.icon {
  display: block;
  fill: white;
  height: 1.5em;
  padding: 13px;
  position: relative;
  width: 1.5em;
  z-index: 3;
}

.l-list-info {
  float: left;
  padding: 16px 0 18px 10px;
}

<div id="nav-primary" class="l-topbar">
  <div id="nav-primary" class="l-topbar"></div>
  <ul class="l-list l-top-list account">
    <li class="btn">
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path>
</svg>
      <ul class="l-list dropdown">
        <li class="btn"><a href="#">donald.duck@cartoon.co.uk</a></li>
        <li class="btn"><a href="#">Control Panel</a></li>
        <li class="btn"><a href="#">Change Cartoon</a></li>
        <li class="btn"><a href="#">Switch User</a></li>
        <li class="btn"><a href="#">Log Off</a></li>
      </ul>
    </li>
  </ul>
</div>
<div class="content">
</div>

您不能将孩子放在父母的后面，在这里nav是下拉列表的父母，这就是z-index在这里不起作用的原因。所以我做了什么，所以我为下拉菜单添加了一个与nav相同的新兄弟，现在应该可以使用了！

Answer 2

z-index是不够的。这两个元素都必须定义位置，并且应该为absolute和/或relative。 Check more for reference。

CSS中的Z索引没有任何作用

2 个答案: