我正在尝试让一个下拉菜单显示在其他所有内容之上。当您将鼠标悬停在 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;
}
答案 0 :(得分: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>