Question

我正在尝试让一个下拉菜单显示在其他所有内容之上。当您将鼠标悬停在 subscribe 上时，菜单应该在顶部，但由于某种原因，它落在了信息行的后面。我试过在所有东西上设置 z-index 并将 position 属性设置为相对或绝对，这应该允许 z-index 工作。但无论我做什么，它都不会显示在顶部。有人能指出我做错了什么吗？

这是有问题的 html。


<div class="card">

  <div class="ttl">
    <h3><a  href="">Title</a></h3>
      <li class='dropdown subscriber_feed'><a> Subscribe</a>
        <div class='dropdown-content'>
           <ul>
             <li>Category1
             <div class='subscribe_div'><a class='subscribe'>Add</a></div></li>
             <li>Category2
               <div class='subscribe_div'><a class='subscribe'>Add</a></div></li>
              <li><a>Edit Categories</a></li>
           </ul>
        </div>
       </li>    
  </div>

<ul id="info">
  <li><span class="posted">Information line 1</span></li>
   <br>
   <li class="tooltip"style="color:#e2804a">Information line 2<span class="tooltiptext"> and additional info</span></li>
   <br>
</ul>

和 css

.card{
  display: block;
  position: relative;
  width: 100%;
  min-height: 130px;
  margin: 0px auto 0px 0px;
  overflow: hidden;
  padding: 5px 0px 0px 0px;
  z-index:1;
}
.ttl{
  max-width: 100%;
  margin-top: 1px;
  margin-left: 4%;
  left:0%;
  padding: 2px 2% 2px 10px;
  overflow: hidden;
  min-height: 75px;
  position: relative;
  display: flex;
  align-items: center;
  z-index:1000;

    }
.ttl > li{
  overflow: visible;
  position: relative;
  display: flex;
  margin: auto 25px auto auto;
  padding: 4px;
  border-radius: 5px;
  cursor: pointer;
  list-style: none;
  border: 1px solid green;
  z-index:1000;
  
}
#info {
  position: relative;
  display: block;
  margin: 6px 2% 3px 27%;
  padding: 0px;
  padding-right: 15px;
  overflow: visible;
  z-index: 1;
}
#info span{
  position: relative;
  bottom: 1px;
}
#info > li, #mini-info > li{
  display: inline-block;
  text-align: center;
  list-style: none;
  z-index: 1;
}
.ttl .dropdown-content{
  right:0px;
  display: none;
  z-index:101;

}
.dropdown{
  overflow: visible;
  position: relative;
  z-index: 101;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  overflow: visible;
  z-index: 101;
}
.dropdown:hover .dropdown-content {
  display: block;
  z-index:101;
}

Answer 1

删除 overflow:hidden 和 .ttl 上的 .card：

.card {
  display: block;
  position: relative;
  width: 100%;
  min-height: 130px;
  margin: 0px auto 0px 0px;
  padding: 5px 0px 0px 0px;
  z-index: 1;
}

.ttl {
  max-width: 100%;
  margin-top: 1px;
  margin-left: 4%;
  left: 0%;
  padding: 2px 2% 2px 10px;
  min-height: 75px;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1000;
}

.ttl>li {
  overflow: visible;
  position: relative;
  display: flex;
  margin: auto 25px auto auto;
  padding: 4px;
  border-radius: 5px;
  cursor: pointer;
  list-style: none;
  border: 1px solid green;
  z-index: 1000;
}

#info {
  position: relative;
  display: block;
  margin: 6px 2% 3px 27%;
  padding: 0px;
  padding-right: 15px;
  overflow: visible;
  z-index: 1;
}

#info span {
  position: relative;
  bottom: 1px;
}

#info>li,
#mini-info>li {
  display: inline-block;
  text-align: center;
  list-style: none;
  z-index: 1;
}

.ttl .dropdown-content {
  right: 0px;
  display: none;
  z-index: 101;
}

.dropdown {
  overflow: visible;
  position: relative;
  z-index: 101;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  overflow: visible;
  z-index: 101;
}

.dropdown:hover .dropdown-content {
  display: block;
  z-index: 101;
}

<div class="card">

  <div class="ttl">
    <h3><a href="">Title</a></h3>
    <li class='dropdown subscriber_feed'><a> Subscribe</a>
      <div class='dropdown-content'>
        <ul>
          <li>Category1
            <div class='subscribe_div'><a class='subscribe'>Add</a></div>
          </li>
          <li>Category2
            <div class='subscribe_div'><a class='subscribe'>Add</a></div>
          </li>
          <li><a>Edit Categories</a></li>
        </ul>
      </div>
    </li>
  </div>

  <ul id="info">
    <li><span class="posted">Information line 1</span></li>
    <br>
    <li class="tooltip" style="color:#e2804a">Information line 2<span class="tooltiptext"> and additional info</span></li>
    <br>
  </ul>

如何让这个元素显示在其他所有元素之上？

1 个答案: