视频 z-index 变换旋转异常行为答案

【问题标题】：Video z-index transform rotate abnormal behavior视频 z-index 变换旋转异常行为
【发布时间】：2019-12-26 02:55:31
【问题描述】：

我有一个场景。 canvas 上有各种组件。有videos、pictures和常见的materials。

如下图，video（黑色的）会遮挡下面的图片，但是图片的'z-index'是2，高于视频的'z-index'是1

#root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.css-rotate {
  position: relative;
  width: 211px;
  height: 375px;
  transform: rotate(90deg);
}
.css-pic {
  /* backface-visibility: hidden; */
  position: absolute;
  display: block;
  z-index: 2;
  left: 43.07px;
  top: 175.78px;
  width: 124.8px;
  height: 83.2px;
  /* background: red; */
}
.css-video {
  position: absolute;
  display: block;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 210.94px;
  height: 375px;
  background: blue;
}
.css-overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  color: rgb(0, 0, 0);
}
.css-height {
  height: 100%;
}
.css-static {
  position: static;
  width: 100%;
  height: 100%;
}

<html>
  <body>
    <div id="root">
      <div class="css-wrap">
        <div class="css-rotate">
          <div class="css-overflow">
            <div class="css-pic">
              <div class="css-height">
                <img class="css-static" src="https://www.gravatar.com/avatar/43111ebfc98a0b559c4a1dc31b6e39f6?s=32&d=identicon&r=PG">
              </div>
            </div>
            <div class="css-video">
              <div class="css-height">
                <video class="css-static" playsinline="" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
                  <source src="http://vjs.zencdn.net/v/oceans.mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

查了一些资料，发现可能和transform造成的context有关，但稍作修改，就更加混乱了。

至少有三种方法可以让图片发挥作用：

1.去掉父级的overflow:hidden（但是这个是不能去掉的，比较混乱）

#root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.css-rotate {
  position: relative;
  width: 211px;
  height: 375px;
  transform: rotate(90deg);
}
.css-pic {
  /* backface-visibility: hidden; */
  position: absolute;
  display: block;
  z-index: 2;
  left: 43.07px;
  top: 175.78px;
  width: 124.8px;
  height: 83.2px;
  /* background: red; */
}
.css-video {
  position: absolute;
  display: block;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 210.94px;
  height: 375px;
  background: blue;
}
.css-overflow {
  
  position: relative;
  width: 100%;
  height: 100%;
  color: rgb(0, 0, 0);
}
.css-height {
  height: 100%;
}
.css-static {
  position: static;
  width: 100%;
  height: 100%;
}

<html>
  <body>
    <div id="root">
      <div class="css-wrap">
        <div class="css-rotate">
          <div class="css-overflow">
            <div class="css-pic">
              <div class="css-height">
                <img class="css-static" src="https://www.gravatar.com/avatar/43111ebfc98a0b559c4a1dc31b6e39f6?s=32&d=identicon&r=PG">
              </div>
            </div>
            <div class="css-video">
              <div class="css-height">
                <video class="css-static" playsinline="" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
                  <source src="http://vjs.zencdn.net/v/oceans.mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

2。把rotate的角度改成0或20这样的小角度（是不是说明可能不是transform引起的？）

#root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.css-rotate {
  position: relative;
  width: 211px;
  height: 375px;
  transform: rotate(30deg);
}
.css-pic {
  /* backface-visibility: hidden; */
  position: absolute;
  display: block;
  z-index: 2;
  left: 43.07px;
  top: 175.78px;
  width: 124.8px;
  height: 83.2px;
  /* background: red; */
}
.css-video {
  position: absolute;
  display: block;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 210.94px;
  height: 375px;
  background: blue;
}
.css-overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  color: rgb(0, 0, 0);
}
.css-height {
  height: 100%;
}
.css-static {
  position: static;
  width: 100%;
  height: 100%;
}

<html>
  <body>
    <div id="root">
      <div class="css-wrap">
        <div class="css-rotate">
          <div class="css-overflow">
            <div class="css-pic">
              <div class="css-height">
                <img class="css-static" src="https://www.gravatar.com/avatar/43111ebfc98a0b559c4a1dc31b6e39f6?s=32&d=identicon&r=PG">
              </div>
            </div>
            <div class="css-video">
              <div class="css-height">
                <video class="css-static" playsinline="" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
                  <source src="http://vjs.zencdn.net/v/oceans.mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

3.如果你删除video元素或者display:none，你会发现显示层次是正确的（是否说明问题出在video元素上）

#root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.css-rotate {
  position: relative;
  width: 211px;
  height: 375px;
  transform: rotate(90deg);
}
.css-pic {
  /* backface-visibility: hidden; */
  position: absolute;
  display: block;
  z-index: 2;
  left: 43.07px;
  top: 175.78px;
  width: 124.8px;
  height: 83.2px;
  /* background: red; */
}
.css-video {
  position: absolute;
  display: block;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 210.94px;
  height: 375px;
  background: blue;
}
.css-overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  color: rgb(0, 0, 0);
}
.css-height {
  height: 100%;
}
.css-static {
  position: static;
  width: 100%;
  height: 100%;
}

<html>
  <body>
    <div id="root">
      <div class="css-wrap">
        <div class="css-rotate">
          <div class="css-overflow">
            <div class="css-pic">
              <div class="css-height">
                <img class="css-static" src="https://www.gravatar.com/avatar/43111ebfc98a0b559c4a1dc31b6e39f6?s=32&d=identicon&r=PG">
              </div>
            </div>
            <div class="css-video">
              <div class="css-height">
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

经过这三个猜测，video、absolute、rotate的混合效果会不会导致'z-index'的表现异常？

希望有人能给我答案。谢谢。

【问题讨论】：

在 Fiferox 上测试你的代码，你会得到答案，因为你不会得到与 Chrome 相同的输出。这很可能是 Chrome 中的一个错误

标签： html css video

【解决方案1】：

您只需将视频的z-index 设置为-1，这样我就可以查看您的所有内容并根据要求设置上述上下文z-index。

这里更新了sn-p

#root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.css-rotate {
  position: relative;
  width: 211px;
  height: 375px;
  transform: rotate(90deg);
}
.css-pic {
    position: absolute;
    display: block;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 124.8px;
    height: 83.2px;
    transform: translate(-50%, -50%);
}
.css-video {
  position: absolute;
  display: block;
  z-index: -1;
  left: 0px;
  top: 0px;
  width: 210.94px;
  height: 375px;
  background: blue;
}
.css-overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  color: rgb(0, 0, 0);
}
.css-height {
  height: 100%;
}
.css-static {
  position: static;
  width: 100%;
  height: 100%;
}

<html>
  <body>
    <div id="root">
      <div class="css-wrap">
        <div class="css-rotate">
          <div class="css-overflow">
            <div class="css-pic">
              <div class="css-height">
                <img class="css-static" src="https://www.gravatar.com/avatar/43111ebfc98a0b559c4a1dc31b6e39f6?s=32&d=identicon&r=PG">
              </div>
            </div>
            <div class="css-video">
              <div class="css-height">
                <video class="css-static" playsinline="" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
                  <source src="http://vjs.zencdn.net/v/oceans.mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

而且我将图像设置为video 的中心

【讨论】：

感谢您的建议。zindex -1 确实可以解决此问题。但不幸的是。这个demo是从实际项目中简化的，视频的zindex并不总是设置为-1
性能方面，可以解决。但是解决不了我的疑惑。是什么导致了这种表现
@Qyellow Dear z-index 属性指定了一个元素的堆栈顺序。堆栈顺序较大的元素总是在堆栈顺序较低的元素前面。*注意：*z-index仅适用于定位元素（位置：绝对、位置：相对、位置：固定或位置：粘性）。teamtreehouse.com/community/…
这个解释是我考虑过的一种可能性。如前所述，小角度旋转，如20或40，即可正常显示图片。这就是我想知道的地方
@Qyellow Opps 我在这里得到了你的问题的答案Link1，Link2，链接2会更精确