Dropdown menu hides behind iframe

Question

I know this is a popular subject, but I've gone through many forums and none of the fixes work for me. I have a dropdown menu that hides behind a pdf I'm displaying. I tried with the pdf set as embed and with it set as iframe. I tried changing the z-index in the css so that the dropdown should be over the pdf, and I tried setting wmode to transparent. None of these worked. I've tried it on Chrome and Safari. Here is my code:

<link rel="stylesheet" href="style.css">

<div id='banner' class='banner'>
  <img id='bannerimage' class='banner' src='banner1920x130.png' alt='The Spartan Spotlight' onclick="location.href='main.html'">
  <div id='issues' class='bannerText' style='float: left;' class='dropdown'>
    <div onclick="dropdown()" class="bannerDropdown">Issues</div>
    <div id="issuesDropdown" class="dropdown-content">
      <a href="#">Issue 3 - Coming soon...</a>
      <a href="issue-2.html">Issue 2 - December 2017</a>
      <a href="issue-1.html">Issue 1 - November 2017</a>
      <a href="#">Older Issues</a>
    </div>
  </div>
  <div id='contact-us' class='bannerText' style='float: right;' onclick="location.href='style.css'">Contact Us</div>
  <div id='the-team' class='bannerText' style='margin: 0 33.3%;' onclick="location.href='style.css'">The Team</div>
</div>

<script>
// This script is for the Issues dropdown
function dropdown() {
    document.getElementById("issuesDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.bannerDropdown')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

<iframe class='article' src="issue-1.pdf#toolbar=0" width="100%" height="100%" type='application/pdf' frameborder=0>

Here is the CSS:

body {
  background-color: #002e63;
}

.article {
  width: 100;
  height: 100%;
  position: fixed;
  z-index: 0;
}

.banner {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  background: #003e63;
  cursor: pointer;
}

.bannerText {
  height: inherit;
  width: 33.34%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  background: #003e63;
  border-bottom: .2em solid #001463;
  font-family: arial;
  font-size: 18pt;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  cursor: pointer;
  line-height: 42px;
}

.bannerText:hover {
  color: #808080;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: .5em;
    font-family: arial;
    font-size: 14pt;
    text-decoration: none;
    display: block;
    border-bottom: .2em solid #001463;
    background: #003e63;
    z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #1958a0}

.bannerDropdown {
    background-color: #003e63;
    color: #fff;
    padding: 0;
    font-size: 18pt;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.bannerDropdown:hover, .bannerDropdown:focus {
    color: #808080;
    z-index: 1;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

 // This script is for the Issues dropdown function dropdown() { document.getElementById("issuesDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.bannerDropdown')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

 body { background-color: #002e63; } .article { width: 100; height: 100%; z-index: 0; } .banner { width: 100%; position: -webkit-sticky; position: sticky; top: 0; display: block; background: #003e63; cursor: pointer; } .bannerText { height: inherit; width: 33.34%; position: -webkit-sticky; position: sticky; top: 0; display: block; background: #003e63; border-bottom: .2em solid #001463; font-family: arial; font-size: 18pt; text-align: center; vertical-align: middle; color: #fff; cursor: pointer; line-height: 42px; } .bannerText:hover { color: #808080; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: white; padding: .5em; font-family: arial; font-size: 14pt; text-decoration: none; display: block; border-bottom: .2em solid #001463; background: #003e63; z-index: 1; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #1958a0} .bannerDropdown { background-color: #003e63; color: #fff; padding: 0; font-size: 18pt; border: none; cursor: pointer; z-index: 1; } .bannerDropdown:hover, .bannerDropdown:focus { color: #808080; z-index: 1; } /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show {display:block;}

 <div id='banner' class='banner'> <img id='bannerimage' class='banner' src='banner1920x130.png' alt='The Spartan Spotlight' onclick="location.href='main.html'"> <div id='issues' class='bannerText' style='float: left;' class='dropdown'> <div onclick="dropdown()" class="bannerDropdown">Issues</div> <div id="issuesDropdown" class="dropdown-content"> <a href="#">Issue 3 - Coming soon...</a> <a href="issue-2.html">Issue 2 - December 2017</a> <a href="issue-1.html">Issue 1 - November 2017</a> <a href="#">Older Issues</a> </div> </div> <div id='contact-us' class='bannerText' style='float: right;' onclick="location.href='style.css'">Contact Us</div> <div id='the-team' class='bannerText' style='margin: 0 33.3%;' onclick="location.href='style.css'">The Team</div> </div> <iframe class='article' src="issue-1.pdf#toolbar=0" width="100%" height="100%" type='application/pdf' frameborder=0/>

Answer 1

The dropdown is a child of the #banner with class="banner" that has position sticky. I added z-index: 1; to that parent element and it's working fine.

Don't forget to close the iframe tag...

 // This script is for the Issues dropdown var dropdown = function() { document.getElementById("issuesDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.bannerDropdown')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

 body { background-color: #002e63; } .article { width: 100; height: 100%; position: fixed; z-index: 0; } .banner { width: 100%; position: -webkit-sticky; position: sticky; top: 0; display: block; background: #003e63; cursor: pointer; z-index: 1; } .bannerText { height: inherit; width: 33.34%; position: -webkit-sticky; position: sticky; top: 0; display: block; background: #003e63; border-bottom: .2em solid #001463; font-family: arial; font-size: 18pt; text-align: center; vertical-align: middle; color: #fff; cursor: pointer; line-height: 42px; } .bannerText:hover { color: #808080; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: white; padding: .5em; font-family: arial; font-size: 14pt; text-decoration: none; display: block; border-bottom: .2em solid #001463; background: #003e63; z-index: 1; } /* Change color of dropdown links on hover */ .dropdown-content a:hover { background-color: #1958a0 } .bannerDropdown { background-color: #003e63; color: #fff; padding: 0; font-size: 18pt; border: none; cursor: pointer; z-index: 1; } .bannerDropdown:hover, .bannerDropdown:focus { color: #808080; z-index: 1; } /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show { display: block; }

 <link rel="stylesheet" href="style.css"> <div id='banner' class='banner'> <img id='bannerimage' class='banner' src='banner1920x130.png' alt='The Spartan Spotlight' onclick="location.href='main.html'"> <div id='issues' class='bannerText' style='float: left;' class='dropdown'> <div onclick="dropdown()" class="bannerDropdown">Issues</div> <div id="issuesDropdown" class="dropdown-content"> <a href="#">Issue 3 - Coming soon...</a> <a href="issue-2.html">Issue 2 - December 2017</a> <a href="issue-1.html">Issue 1 - November 2017</a> <a href="#">Older Issues</a> </div> </div> <div id='contact-us' class='bannerText' style='float: right;' onclick="location.href='style.css'">Contact Us</div> <div id='the-team' class='bannerText' style='margin: 0 33.3%;' onclick="location.href='style.css'">The Team</div> </div> <script> </script> <iframe class='article' src="issue-1.pdf#toolbar=0" width="100%" height="100%" type='application/pdf' frameborder=0></iframe>