是否有一种明确的方法可以在嵌套转换中设置 Z-index 的上下文

Question

我目前正在开发一个项目，该项目 div 背景图像在使用变换时滑动：翻译。这个 div 的 z-index 为零，而其他一些兄弟元素具有更高的 z-index 以确保它们位于顶部。这在我的横向版本中似乎工作正常。然而，由于这个用例只有横向版本，我还实现了一个转换：在纵向模式下旋转以确保横向观看。纵向观看时，背景图像会滑入所有内容之上，然后重新定位到后面。不是破坏，而是草率，因为无论如何都应该旋转它。然而，在部署之后，我被告知有两个图像实例从未重新定位到其 0 Z-index 主页并中断了使用。我看过 https://katydecorah.com/code/z-index-and-transform/ and z-index is canceled by setting transform(rotate)，但仍然不确定如何处理。该问题似乎只在应用旋转时出现在 Safari 中。

HTML 个元素的粗略轮廓：

    <div id="root">
      <div class="App ">
        <div class="mainView">
          <div class="navBar"></div>
          <div class="mainContent">
            <div class="arrowWrapper">
              <div class="arrow slideInItem"></div>
            </div>
            <div class="alphaView">
          </div>
          <div class="footerBar"></div>
        </div>
      </div>
    </div>

一些相关的CSS：

    .App {
      text-align: center;
      height: 100%;
      width:100%;
    }
    .mainView{
      height: 100%;
      width: 100%;
      background-color: #fff;
      overflow:hidden;
      position: relative;
      transform-style: preserve-3d;
     }
     .navBar{
       height: 79px;
       width: 100%;
       display:flex;
       flex-direction: row;
       align-items: center;
       background-color: #fff;
     }
     .mainContent{
       display:flex;
       flex-direction:column;
       justify-content:flex-end;
       margin-top: 18px;
       height:85.25%
     }
     .arrow{
       position: absolute;
       z-index: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-size: contain;
       background-image: url("../images/Page_background_Arrow.png");
       background-repeat: no-repeat;
     }
    .arrowWrapper{
      transform-style: preserve-3d;
      position: absolute;
      z-index: 0;
      top: 97px;
      width: 100%;
      height: 86%;
    }
    .alphaView{
      display: flex;
      height: 100%;
      width: 100%;
      overflow:hidden;
      position: relative;
      z-index: 10;
     justify-content: space-around;
   }
   .footerBar{
     z-index: 999;
     position:fixed;
     top:auto;
     display:flex;
     bottom:0;
     height: 6.15%;
     width:100%;
     flex-direction:row;
     align-items:center
   }
    /* portrait lock */
    @media only screen and (min-width: 100px) and (orientation: 
     portrait) {
    #root {
      transform: rotate(-90deg);
      transform-origin: left top;
      height: 100vw;
      width: 100vh;
      overflow: hidden;
      position: absolute;
      top: 100%;
      left: 0;
    }
  }

谢谢

Answer 1

尝试为背景图像设置 -1 索引。

这也是一篇关于 z-index 的非常好的文章What the heck, z-index??

是否有一种明确的方法可以在嵌套转换中设置 Z-index 的上下文

Is there a clear way of setting the context of a Z-index inside nested transformations

css

safari