Question

创建此票证浪费了大量时间，将其标记为重复，由一个懒得查看问题并发现它们实际上不相关的人。这是我对时间的极大利用。

所以我已经阅读了相当多的文档试图找到解决这个问题的方法，但目前我没有想法。

问题：我有一个顶部导航，在这个下面，我有一个 iFrame。导航有一个按钮会触发一个下拉菜单，现在这个下拉菜单在悬停时不会消失，这对以下内容很重要。

我想创建一个场景，其中 iFrame 位于导航上方，但位于下拉列表下方。

这应该不是一个大问题，但我遇到了以下问题。

Dropdown 是导航的子项，似乎继承了 z-index，所以如果将下拉 z-index 设置为 41，而将导航设置为 30，我会想象，你有这样的东西 30.41 并使 iFrame z-index 为 30 我认为 30.00。但是，似乎存在“隐藏的（至少对我而言）”堆叠上下文。它们实际上是 30.0.41 和 30.1.0，这意味着 iFrame 位于两者之上。

不太确定如何解决这个问题，我做了一个小提琴，第二个例子有效，但期望 Nav 和 iFrame 是实际的兄弟姐妹，而它们不是（仅在视觉上）。

尝试彻底阅读本文，但没有运气： 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>

兄弟姐妹的 Z-index 问题

0 个答案: