html - Z 索引为 "not working"

Question

我正在学习 HTML 和 CSS，但遇到了一些问题。有 3 个 html 元素。第一个是导航栏。第二个是该导航中的按钮。第三个是下拉菜单。基本上，我不会在第二个元素的悬停上滑下第三个元素。我明白了。问题是向下滑动时出现在第 1 和第 2 之上的第 3 个元素。元素。在不透明度为 0.99 的情况下，我设法将它滑到元素 2 下。但它仍然在元素 1 上。

我怎么能把它放在所有。是否可以？这是我的代码示例。 https://jsfiddle.net/eth66zea/

            .su-drop {
            position: absolute;
            left: 0px;
            top: -100px;
            height: 100px;
            min-width: 200px;
            background-color: greenyellow;
            transition: all 0.333s;
            z-index: -1;
            display: inline;
            opacity: 0.99
            }
        .su-header {
            position: relative;
            height: 70px;
            color: white;
            background-color: black;
            border-bottom: 2px #1f7caf solid;
            margin-bottom: 10px;
            z-index: 5;
        }
        .su-header .su-ul {
            position: relative;
            list-style-type: none;
            font-size: 16px;
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 10%;
        }
        .su-header .su-ul .su-li{
            position: relative;
            float: left;
            padding: 10px 10px;
            line-height: 50px;
            min-width: 100px;
            text-align: center;
            transition: all 0.6s;
            cursor: pointer;
            display: inline;
        }
        .su-header .su-ul .su-li:hover{
            background-color: #1f7caf;
        }
    
      .su-header .su-li:last-child:hover > .su-drop{
        top: 70px;
      }

<div class="su-header">
  <ul class="su-ul">
    <li class="su-li"><i class="fa fa-heartbeat" aria-hidden="true"></i></li>
    <li class="su-li">Test1</li>
    <li class="su-li">Test2</li>
    <li class="su-li">
      Dropdown
      <div class="su-drop"></div>
    </li>
  </ul>
</div>

感谢您的帮助。

Answer 1

这是解决 z-index 问题的一种方法。

您可以尝试在高度值上进行过渡，而不是在 top 偏移量上进行过渡。

将 .su-drop 元素放置在您需要的位置(.su-li 的底部)并将其初始高度设置为 0。悬停时，您然后将高度设置为所需的值。

如果你想要顶部的颜色条，你需要添加第二个元素，.su-drop-up，但这可能是可选的。

如果您没有 .su-drop 的高度值，那么您可能需要更改您的 HTML，这完全取决于您的布局和设计的细节。

.su-drop {
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 0px;
  min-width: 200px;
  background-color: greenyellow;
  transition: all 0.333s;
  z-index: -1;
  display: inline;
  opacity: 0.97
}
.su-drop-up {
  position: absolute;
  left: 0px;
  top: -10px;
  height: 10px;
  min-width: 200px;
  background-color: greenyellow;
  transition: all 0.333s;
  z-index: -1;
  display: inline;
  opacity: 0.97
}
.su-header {
  position: relative;
  height: 70px;
  color: white;
  background-color: black;
  border-bottom: 2px #1f7caf solid;
  margin-bottom: 10px;
  z-index: 5;
  opacity: 1;
}
.su-header .su-ul {
  position: relative;
  list-style-type: none;
  font-size: 16px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10%;
  opacity: 0.98;
}
.su-header .su-ul .su-li {
  position: relative;
  float: left;
  padding: 10px 10px;
  line-height: 50px;
  min-width: 100px;
  text-align: center;
  transition: all 0.6s;
  cursor: pointer;
  display: inline;
}
.su-header .su-ul .su-li:hover {
  background-color: #1f7caf;
}
.su-header .su-li:last-child:hover > .su-drop {
  height: 100px;
  bottom: -100px;
}
.su-header .su-li:last-child:hover > .su-drop-up {
  height: 0px;
}

<div class="su-header">
  <ul class="su-ul">
    <li class="su-li"><i class="fa fa-heartbeat" aria-hidden="true"></i>
    </li>
    <li class="su-li">Test1</li>
    <li class="su-li">Test2</li>
    <li class="su-li">
      Dropdown
      <div class="su-drop-up"></div>
      <div class="su-drop"></div>
    </li>
  </ul>
</div>