dropdown menu goes under DIV-CodePudding

i have an issue with an app that i've created, i can't find the right solution to have the dropdown always visible, and not hidden by the div

if you click on the magnifier next to the link, the dropdown goes under the div....

.donContainer{
  margin: 0 auto;
  width: fit-content;
  border-radius: 20px;
  /*box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
}

.screenImg {
  display: block;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 20px;
  margin-left: 8px;
  margin-right: 8px;
}

.centerlink {
  text-align: center;
}
.dropbtn {
  background: transparent;
  border-radius: 6px;
  font-size: 9px;
  margin-left: 0px;
  border: none;
}

.dropdown-prev {
  position: relative;
  display: inline-block;
}
img.screenImg {
  margin: 0 auto;
  min-width: 230px;
  padding: 10px;
  max-height: 140px;
}
i.fas.fa-search.preview {
  font-weight: 900;
  font-size: 11px;
  color: @primary-color;
}
.dropdown-content-prev {
  display: none;
  border-radius: 20px;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 250px;
  padding: 7px;
  z-index: 1;
}

.dropdown-content-prev a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-prev:hover .dropdown-content-prev {display: block;}
.titleDesc {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 13px;
  padding-bottom: 10px;
}
.Post-body {
  overflow: hidden;
}


.menu {
  position: absolute;
  width: 300px;
  height: 300px;
  background:white;
  box-shadow: 0px 0px 0px 2px black;
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<div class="Post-body"><p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a><div class="dropdown-prev" id="linkpreview">
  <button class="dropbtn"><i class="fas fa-search preview"></i></button>
  <div class="dropdown-content-prev">
    <div class="donContainer">
   <img class="screenImg" src="https://assets.nflxext.com/ffe/siteui/vlv3/b77751c7-0e02-4941-af39-30514ff6b3e2/4cb1c2e1-ba3b-4acf-9bc5-a635fb305d80/UA-en-20211026-popsignuptwoweeks-perspective_alpha_website_small.jpg" width="250">    <div class="titleDesc"><div class="titleDesc">Watch Netflix movies &amp; TV shows online or stream right to your smart TV, game console, PC, Mac, mobile, tablet and more.</div></div>    </div>
  </div>
</div> sdfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd <a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a><div class="dropdown-prev" id="linkpreview">
  <button class="dropbtn"><i class="fas fa-search preview"></i></button>
  <div class="dropdown-content-prev">
    <div class="donContainer">
   <img class="screenImg" src="https://assets.nflxext.com/ffe/siteui/vlv3/b77751c7-0e02-4941-af39-30514ff6b3e2/4cb1c2e1-ba3b-4acf-9bc5-a635fb305d80/UA-en-20211026-popsignuptwoweeks-perspective_alpha_website_small.jpg" width="250">    <div class="titleDesc"><div class="titleDesc">Watch Netflix movies &amp; TV shows online or stream right to your smart TV, game console, PC, Mac, mobile, tablet and more.</div></div>    </div>
  </div>
</div>  dsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd</p></div>

how can i fix the css?

i've tried adding

z-index: 2; to the dropdown menu but it doesn't work

jsfiddle:

https://jsfiddle.net/mhdw9y4e/

CodePudding user response：

You should remove property

.Post-body {
  overflow: hidden;
}

It will be working fine:

.donContainer{
  margin: 0 auto;
  width: fit-content;
  border-radius: 20px;
  /*box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
}

.screenImg {
  display: block;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 20px;
  margin-left: 8px;
  margin-right: 8px;
}

.centerlink {
  text-align: center;
}
.dropbtn {
  background: transparent;
  border-radius: 6px;
  font-size: 9px;
  margin-left: 0px;
  border: none;
}

.dropdown-prev {
  position: relative;
  display: inline-block;
}
img.screenImg {
  margin: 0 auto;
  min-width: 230px;
  padding: 10px;
  max-height: 140px;
}
i.fas.fa-search.preview {
  font-weight: 900;
  font-size: 11px;
  color: @primary-color;
}
.dropdown-content-prev {
  display: none;
  border-radius: 20px;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 250px;
  padding: 7px;
  z-index: 1;
}

.dropdown-content-prev a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-prev:hover .dropdown-content-prev {display: block;}
.titleDesc {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 13px;
  padding-bottom: 10px;
}


.menu {
  position: absolute;
  width: 300px;
  height: 300px;
  background:white;
  box-shadow: 0px 0px 0px 2px black;
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<div class="Post-body"><p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a><div class="dropdown-prev" id="linkpreview">
  <button class="dropbtn"><i class="fas fa-search preview"></i></button>
  <div class="dropdown-content-prev">
    <div class="donContainer">
   <img class="screenImg" src="https://assets.nflxext.com/ffe/siteui/vlv3/b77751c7-0e02-4941-af39-30514ff6b3e2/4cb1c2e1-ba3b-4acf-9bc5-a635fb305d80/UA-en-20211026-popsignuptwoweeks-perspective_alpha_website_small.jpg" width="250">    <div class="titleDesc"><div class="titleDesc">Watch Netflix movies &amp; TV shows online or stream right to your smart TV, game console, PC, Mac, mobile, tablet and more.</div></div>    </div>
  </div>
</div> sdfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd <a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a><div class="dropdown-prev" id="linkpreview">
  <button class="dropbtn"><i class="fas fa-search preview"></i></button>
  <div class="dropdown-content-prev">
    <div class="donContainer">
   <img class="screenImg" src="https://assets.nflxext.com/ffe/siteui/vlv3/b77751c7-0e02-4941-af39-30514ff6b3e2/4cb1c2e1-ba3b-4acf-9bc5-a635fb305d80/UA-en-20211026-popsignuptwoweeks-perspective_alpha_website_small.jpg" width="250">    <div class="titleDesc"><div class="titleDesc">Watch Netflix movies &amp; TV shows online or stream right to your smart TV, game console, PC, Mac, mobile, tablet and more.</div></div>    </div>
  </div>
</div>  dsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd</p></div>