CODEWITHSUNDEEP
htmlcss
Scoop561
Scoop561

Reputation: 73

How do I get this element to display on top of everything else?

I'm trying to get a dropdown menu to display on top of everything else. When you hover over subscribe the menu should be on top, but for some reason it falls behind the information line. I've tried setting the z-index on everything and setting the position property to relative or absolute which should allow the z-index to work. But no matter what I do it won't display on top. Can anybody point out what I'm doing wrong?

Here's the html in question.


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

And the 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;
}

Upvotes: 1

Views: 441

Answers (1)

Spectric
Spectric

Reputation: 31987

Remove overflow:hidden on .ttl and .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>

Upvotes: 1

Related Questions