ios - 即使在设置了适当的 z-index 之后，它也无法在 ipad safari 上运行。

Question

我的情况真的很糟糕。我有我在页面下显示的自定义 div。我目前遇到的唯一问题是它无法在 iPad 上运行。即使在我对两个元素都有适当的 z-index 之后，叠加层也会覆盖弹出窗口。

此问题仅在 iPad Safari 中出现。在其他浏览器上它工作正常。我找到了一个解决方案，我需要将弹出窗口移动到覆盖 div 旁边或附近，由于 knockout.js 的绑定(bind)上下文，这对我来说是不可能的

问题快照

如您所见，打开的压延机位于覆盖灰色 div 的后面，您可以在此处看到附加图像。

下面是 html 结构，其中 higlited 是日历容器和最后覆盖的 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>