Z-index issue with sibling children

Question

A lot of time was wasted creating this ticket, having it being marked as a duplicate, by a person who didn't bother to look at the issue and see that they are in fact NOT related. What a great use of my time this was.

So I've been through quite some documentation trying to find a solution to this problem, but currently I'm out of ideas.

The issue: I have a top navigation, below this, I have an iFrame. The navigation has a button which will trigger a dropdown, now this dropdown does not disappear when hovering out of it, and this is important for the following.

I want to create a scenario where the iFrame is above the navigation, but below the dropdown.

This should not imo not have been a big issue, but I ran into the following issue.

• Dropdown is a child of the navigation, and seems to inherit the z-index, so if the dropdown z-index is set to 41, and the navigation to 30, i would imagine, you had something like this 30.41 and making the iFrame z-index 30 I thought 30.00. However, it seems there is a "hidden (at least to me)" stacking context going on. They are in fact 30.0.41 and 30.1.0 which means the iFrame is on top of both.

Not really sure how to get around this, I made a fiddle, and the second example works, but that expects Nav and iFrame to be actual siblings, and they are not (only visually).

Tried thoroughly reading this, but no luck: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

https://jsfiddle.net/s0j5mLp6/3/

.test1 {
  border: 1px solid green;
  width: 200px;
  height: 200px;
  float: left;
}

.nav {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  z-index: 30;
}

.dropdown {
   width: 100px;
   height: 100px;
   background: darkred;
   position: absolute;
   z-index: 40;
   top: 70px;
   left: 70px;
}

.iframe {
  width: 100px;
  height: 100px;
  background:  blue;
  opacity: 0.7;
  position: absolute;
  z-index: 30;
  top: 100px;
  will-change: z-index;
}

.test2 {
  border: 1px solid green;
  width: 200px;
  height: 200px;
  float: left;
}

.nav2 {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
}

.dropdown2 {
   width: 100px;
   height: 100px;
   background: darkred;
   position: absolute;
   z-index: 40;
   top: 70px;
   left: 70px;
}

.iframe2 {
  width: 100px;
  height: 100px;
  background:  blue;
  opacity: 0.7;
  position: absolute;
  top: 100px;
  will-change: z-index;
}

<div class="test1">
  <div class="nav">
    <div class="dropdown"></div>
  </div>
  <div class="iframe"></div>
</div>

<div class="test2">
  <div class="nav2">
    <div class="dropdown2"></div>
  </div>
  <div class="iframe2"></div>
</div>