视频zindex变换旋转行为异常

问题描述 投票:0回答:1

我有一个场景。画布上有各种组件。有视频,图片和常用材料。

如下图所示,视频(黑色)会阻止下面的图像,但是图像的zindex为2,高于视频的zindex为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>

[查找一些数据,发现它可能与变换引起的上下文有关,但是稍加修改后,就更加令人困惑。

至少有三种方法可以使图片起作用:

  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 {
  
  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>
  1. 将旋转角度更改为小角度,例如0或20(这是否意味着它可能不是由变换引起的?]

#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>
  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">
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

经过这三个猜测,视频,绝对和旋转的混合效果是否会导致zindex的异常表现?我希望有人能给我答案。

html css
1个回答
0
投票

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

这里是更新的代码段

#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的中心
© www.soinside.com 2019 - 2024. All rights reserved.