即使设置了正确的z-index，它也无法在ipad safari上运行。

Question

我的情况非常糟糕。我有我的自定义div，我在页面下显示。我目前唯一的问题是它不适用于iPad。即使我对两个元素都有适当的z-index，覆盖也会覆盖弹出窗口。

此问题仅面向iPad Safari。在其他浏览器上，它工作正常。我找到了一个解决方案，我需要将我的弹出窗口移到旁边或附近的叠加div，这对我来说是不可能的，因为knockout.js的绑定上下文

问题快照

这里你可以看到附加的图像打开的日历在叠加灰色div后面。

下面是html结构，其中higlited是压延容器＆amp;在最后的叠加div。

让我知道是否有人可以建议我处理这个问题。

Answer 1

似乎你的固定元素在一个z-index比覆盖率低的其他固定元素内部，即使元素本身具有更高的z-index，它也会留在它后面。所以你必须找到更高的固定元素，并将它的z-index更改为更高的值。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 4;
}
.lower {
  position: fixed;
  z-index: 2
}
.popup {
  position: fixed;
  border: 1px solid black;
  background: white;
  height: 200px;
  width: 200px;
  z-index: 100;
}

<div class="lower">
  <div class="popup"></div>
</div>
<div class="overlay"></div>

Answer 2

我在Safari中也发生这种情况，只需通过从父div移除overflow:hidden即可解决。