html - 视频 z-index 变换旋转异常行为-6ren

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

转载作者：行者123 更新时间：2023-11-27 22:50:10

我有一个场景。 canvas 上有各种组件。有视频、图片和常用的资料。

如下图，video(黑色的)会挡住下面的图片，但是图片的'z-index'为2，高于视频是 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的 Angular 改成0或20等小 Angular (这是否意味着它可能不是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'表现异常？

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

最佳答案

你只需将视频的 z-index 设置为 -1 这样我就可以在你的所有内容后面设置上面的上下文 z-index 根据要求

Here is updated snippet

#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

的中心

关于html - 视频 z-index 变换旋转异常行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59483408/

文章推荐： javascript - 如何在 JavaScript 中展平嵌套数组？

文章推荐： CSS动画延迟重复

文章推荐： php - 具有敏感隐藏字段的捐赠页面

文章推荐： java - JEditorPane 和 HTMLEditorKit 的替代品——太慢了

javascript - 如何使 textarea 内容可以设置样式或设置 div 行为(如 textarea 行为)？
我想创建一个基于 jQuery 的非常简单的 html 编辑器(不是所见即所得)。我的问题是如何制作 textarea或 div可能在上面写一些文字然后样式即标签(例如 some stuff 将
Ant isset 行为
根据文档 isset 条款“测试此项目中是否已设置给定属性”。我不明白设置属性时 isset 返回 true 还是 false 在下面的代码片段中，当 env.JAVA_HOME 未设置时，java.
关于默认命令超时的 Vim 行为
我正在尝试取消映射 o这是执行 :only 的默认命令( :help :only )，所以我尝试的第一件事是: nmap o 这种作品，除非我按，等待超过timeoutlen ms 然后按 o
Django auto_now 行为
我有以下型号: class MetaData(models.Model): created_at = models.DateTimeField(auto_now_add=True, auto_
R strftime() 行为
下面列出了两行代码。两者对日期和时间的期望相同，但只有一个有效。我正在使用 R 3.1。以下不起作用: DateTime2=strftime("08/13/2010 05:26:24.350", f
C 行为(非初始化值)
我有一个关于 C 代码的问题。 #include void foo(void){ int a; printf("%d\n",a); } void bar(void){
Java BufferedInputStream 行为
如果文件大小 > 8k，为什么读取的最后一个字节 = 0？ private static final int GAP_SIZE = 8 * 1024; public static void main(
powershell - ValueFromPipeline 行为？
我有一个命令 Get-Testdata从不同来源检索测试数据并将这些数据存储到 PSObject以不同的值作为属性。然后将对象总数存储为数组，以便于操作、排序、计算等。我的问题是我希望能够将这些数据
写入文件描述符时的 epoll 行为
我正在使用 epoll 将大消息写入使用 HTTP 协议(protocol)的服务器。 fds 都设置为非阻塞，我正在使用边缘触发事件。我知道对于 EPOLLIN，我需要循环读取 fd，直到返回 EA
PHP intval() 行为？
这对我来说听起来很奇怪: $test_1 = 'string'; $test_2 = '0'; var_dump(intval($test_1)); // Output: int 0 var_dump
java - 在java中等于和==行为
这个问题在这里已经有了答案: Java: Integer equals vs. == (7 个回答) 7年前关闭。请您解释以下行为。 public class EqAndRef { publ
jquery - Drupal 行为
Drupal 的行为到底是什么？它为模块开发人员提供什么类型的服务层？它映射到 jQuery.ready 的关系类型是什么？最佳答案长版:Drupal.behaviors 不仅仅是 jQuer
iphone - dispatch_get_global_queue 行为
以下代码: dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{ for (int i=0
javascript - 移动设备上的奇怪的toggle()行为
人们可以将项目添加到数据库中。我让他们选择在此时添加它，或手动选择日期。因此我得到了这个 HTML 结构。 (请注意，我将日期和时间选择器妥协为只有一行文本) Selec
r - is.nan() 行为
创建了一个数据框: simpleDF is.na(simpleDF$vals) [1] TRUE TRUE FALSE > is.nan(simpleDF$vals) [1] FALSE TRU
Docker Squash 行为
我有一个大的 docker 镜像 A，我创建了一个新的 Dockerfile FROM A RUN rm /big-folder 我尝试使用以下方法构建图像: docker build --squas
操作系统内存不足时的 JVM 行为
我想知道以下情况下 JVM 的行为是什么: JVM 最小堆大小 = 500MB JVM 最大堆大小 = 2GB 操作系统有 1GB 内存 JVM启动后，程序运行一段时间后，使用内存超过1GB。我想知道
Apigee - SpikeArrest 行为
我们正在使用 spikeearrest 策略，但我们不了解其工作原理。峰值逮捕配置如下: 5pm 阅读文档，我们了解到，如果我们在一分钟内调用此流超过 5 次，则该策略将在第 5 次之后
javascript - BodyParser 行为
我正在使用 cURL 发送 POST 请求: curl http://tarvos.local:8080/partial_Users/2 -d '{currentPage : 1, firstID :
java - RowNum 行为
我的表中有 6442670 条记录，我正在使用以下命令获取它们jdbctemplate 使用行号一次 1000000 个。以下是查询 select * from (select rowNum rn

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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