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

下拉列表是gini([1, 2, 3]) # No weight: 0.22. gini([1, 1, 1, 2, 2, 3]) # Manually weighted: 0.23. gini([1, 2, 3], weight=[3, 2, 1]) # Should also give 0.23.的孩子，#banner有位置黏。我将class="banner"添加到该父元素中，并且它正常工作。

不要忘记关闭iframe代码......

＆＃13;

z-index: 1;

＆＃13;

// 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');
      }
    }
  }
}

＆＃13;

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

＆＃13;

下拉菜单隐藏在iframe背后

1 个答案: