javascript - 下拉菜单隐藏在 iframe 后面

Question

我知道这是一个热门话题，但我浏览了很多论坛，但没有一个修复对我有用。我有一个下拉菜单，隐藏在我正在显示的 pdf 后面。我尝试将 pdf 设置为嵌入并将其设置为 iframe。我尝试更改 css 中的 z-index，以便下拉列表应位于 pdf 上方，并且我尝试将 wmode 设置为透明。这些都不起作用。我已经在 Chrome 和 Safari 上试过了。这是我的代码:

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

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

下拉列表是 #banner 的子项，其中 class="banner" 具有位置黏。我将 z-index: 1; 添加到该父元素并且它工作正常。

不要忘记关闭 iframe 标签...

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