Question

我在使用Safari时遇到了一些麻烦，并在导航元素上显示了一个弹出窗口。由于某些原因，给定的z-index会被忽略，弹出窗口会隐藏在导航后面。

以下是相关的HTML代码：

<section class="application">
<header class="application-header"></header>
<nav class="application-navigation"></nav>
<div class="application-content">
  <div class="wizard-background">
    <div class="wizard-content">TEST TEST TEST TEST</div>
  </div>
</div>

这里的代码更少

.application {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;

    &-navigation {
        position: absolute;
        background: green;
        left: 0;
        width: 200px;
        bottom: 0;
        top: 50px;
    }

    &-header {
        position: absolute;
        background: red;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
    }

    &-content {
        position: absolute;
        z-index: 81;
        left: 200px;
        top: 50px;
        bottom: 0;
        right: 0;
        background: yellow;
        overflow-y: auto;
    }
}
.wizard {

     &-background {
         z-index: 100;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         position: fixed;
         background: rgba(0, 0, 0, 0.1);
      }

      &-content {
          position: fixed;
          top: 100px;
          left: 150px;
          width: 200px;
          height: 200px;
          background: white;
          z-index: 101;
      }
}

在野生动物园中查看此代码时，您会看到“向导内容”部分隐藏在“导航内容”之后。如果您从“应用程序内容”中删除z-index，它将正常工作。

我还准备了一个CodePen，您可以在其中看到结果，但是您必须使用野生动物园才能看到我的意思。

有人可以解释我在做什么错吗？或Safari的工作方式与所有其他浏览器在z-index上的不同。

Answer 1

我不确定Safari为什么会这样弄乱z-index，但是如果您将transform: translate3d(0, 0, 0);添加到父元素，通常会开始正常运行。

这是您CodePen的分支。

在这种情况下，我将其添加到.application

.application {
  transform: translate3d(0, 0, 0);
}

Safari嵌套的z-index问题

1 个答案: