Question

我正在学习HTML和CSS并遇到一些问题。 Thare是3个html元素。第一个是导航栏。 Seconde one是导航中的按钮。第三个是下拉菜单。基本上，我不会在第二个元素的悬停下滑第3个。我明白了。问题是向下滑动时的第3个元素出现在第1和第2。元件。在不透明度为0.99的情况下，我设法在元素2下滑动它。但它仍然是OVER元素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，这完全取决于布局和设计的细节。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

更改您的身高属性

   .su-drop {
        position: absolute;
        left: 0px;
        top:70px;
        height: 0px;
        min-width: 200px;
        background-color: greenyellow;
        transition: all 0.333s;
        z-index: -1;
        display: inline;
        opacity: 0.97
        }

.su-header .su-li:last-child:hover > .su-drop{
    height:100px;
  }

工作演示https://jsfiddle.net/Rahul_Ravi/eth66zea/3/

Z-Index“不工作”

2 个答案: