Iframe Z-Index for Drop Down Menu

// This script is for the Issues dropdownvar 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>

z-index and iframe issue - dropdown menu

I would use the embedding of the youtube video using the <object> tag and not Iframe. Then, I would use the <param name="wmode" value="transparent"> inside the <object>. Something like this:

<object width="640" height="385"><param name="wmode" value="transparent"></param><param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

Here is some more info

z-index of drop down wont behave with iframe

Take z-index:1 off #header
Set #nav li ul z-index:100
Set the iframe z-index:50

The problem is that your zindex for the iframe is 1000, while your menu was z-index:1

Ignored z-index with IFrame. Drop down menu hidden.

After a week of trying different solutions and fixes, i couldnt find anything that would work for my specific situation. Instead i just made the vertical spacing on my sub menus much shorter and pushed the pdf in the iframe further down on the page so the drop down menus never overlap.

dropdown z-Index Issue

Ahhh, you mean the menu (I though selects over FAQ).

You try to set z-index to header--tabbar, but the parent is under content. You need to set z-index to .wt-container previous sibling, it means header. And of course, set position too.

style.css, line 778

.header {position: relative; z-index: 99}

Google Maps, Z Index and Drop Down Javascript menus

If your problem happens in Internet Explorer, but it renders the way you'd expect in FireFox or Safari, this link was extraordinarily helpful for me with a similar problem.

It appears to boil down to the idea that marking an element as "position:relative;" in CSS causes IE6&7 to mess with it's z-index relative to other elements that come before it in the HTML document, in unintuitive and anti-spec ways. Supposedly IE8 behaves "correctly" but I haven't tested it myself.

Anutron's advice is going to be really helpful if your problem is with a <SELECT> form element, but if you're using JavaScript to manipulate divs or uls to act like a drop down I don't think it's going to help.

---

Related Topics