title: Dropdown menu hides behind iframe
body: <p>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:
      </p>
  
  <pre><code>&lt;link rel="stylesheet" href="style.css"&gt;
  
  &lt;div id='banner' class='banner'&gt;
    &lt;img id='bannerimage' class='banner' src='banner1920x130.png' alt='The Spartan Spotlight' onclick="location.href='main.html'"&gt;
    &lt;div id='issues' class='bannerText' style='float: left;' class='dropdown'&gt;
      &lt;div onclick="dropdown()" class="bannerDropdown"&gt;Issues&lt;/div&gt;
      &lt;div id="issuesDropdown" class="dropdown-content"&gt;
        &lt;a href="#"&gt;Issue 3 - Coming soon...&lt;/a&gt;
        &lt;a href="issue-2.html"&gt;Issue 2 - December 2017&lt;/a&gt;
        &lt;a href="issue-1.html"&gt;Issue 1 - November 2017&lt;/a&gt;
        &lt;a href="#"&gt;Older Issues&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id='contact-us' class='bannerText' style='float: right;' onclick="location.href='style.css'"&gt;Contact Us&lt;/div&gt;
    &lt;div id='the-team' class='bannerText' style='margin: 0 33.3%;' onclick="location.href='style.css'"&gt;The Team&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  // 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 &lt; dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
  &lt;/script&gt;
  
  &lt;iframe class='article' src="issue-1.pdf#toolbar=0" width="100%" height="100%" type='application/pdf' frameborder=0&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>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 &lt;div&gt; - 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;}
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 &lt; dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 &lt;div&gt; - 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;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='banner' class='banner'&gt;
    &lt;img id='bannerimage' class='banner' src='banner1920x130.png' alt='The Spartan Spotlight' onclick="location.href='main.html'"&gt;
    &lt;div id='issues' class='bannerText' style='float: left;' class='dropdown'&gt;
      &lt;div onclick="dropdown()" class="bannerDropdown"&gt;Issues&lt;/div&gt;
      &lt;div id="issuesDropdown" class="dropdown-content"&gt;
        &lt;a href="#"&gt;Issue 3 - Coming soon...&lt;/a&gt;
        &lt;a href="issue-2.html"&gt;Issue 2 - December 2017&lt;/a&gt;
        &lt;a href="issue-1.html"&gt;Issue 1 - November 2017&lt;/a&gt;
        &lt;a href="#"&gt;Older Issues&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id='contact-us' class='bannerText' style='float: right;' onclick="location.href='style.css'"&gt;Contact Us&lt;/div&gt;
    &lt;div id='the-team' class='bannerText' style='margin: 0 33.3%;' onclick="location.href='style.css'"&gt;The Team&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;iframe class='article' src="issue-1.pdf#toolbar=0" width="100%" height="100%" type='application/pdf' frameborder=0/&gt;</code></pre>
  </div>
  </div>
  </p>