堆栈内存溢出
  简体   繁体   English

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

[英]Video z-index transform rotate abnormal behavior

 原文  2019-12-26 02:55:31  9   1    html/ css/ video

问题描述

I have a scene.我有一个场景。 There are various components on the canvas . canvas上有各种组件。 There are videos , pictures and common materials .有videos 、 pictures和常用materials 。

As shown below, the video (the black one) will block the image below, but the 'z-index'of the image is 2, higher than the 'z-index' of the video is 1如下图， 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>

Looking up some data, it is found that it may be related to the context caused by transform, but after a little modification, it is even more confusing.查了一些资料，发现可能和transform引起的context有关，但是稍加修改后，就更加混乱了。

There are at least three ways I can make pictures work:我至少可以通过三种方式使图片工作：

1. Remove the overflow: hidden of the parent (but this is not removable, which is confusing) 1.去除overflow: hidden of parent（但是这个是不可去除的，比较混乱） 

 #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. Change the angle of rotate to a small angle such as 0 or 20 (does this mean that it may not be caused by transform?) 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. If you delete the video element or display: none, you will find that the display level is correct (does that mean the problem lies in the video element) 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>

After these three guesses, does the mixed effect of video, absolute and rotate lead to the abnormal performance of 'z-index'?经过这三个猜测，video、absolute、rotate的混合效果会不会导致'z-index'的表现异常？

I hope someone can give me an answer.我希望有人能给我一个答案。 Thanks.谢谢。

1 个解决方案

解决方案1
 0  2019-12-26 06:02:16

There you go just set the z-index of video to -1 so that i goes behind all your content and set the above context z-index as per req.在那里，您只需将视频的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>
And also i set the image to center of video 而且我还将图像设置为video中心

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用变换旋转和缩放的悬停效果的z索引问题 - z-index issue on hover effect using transform rotate and scale CSS3 z-index问题与transform：rotate（） - CSS3 z-index issue with transform:rotate() z-index和CSS旋转 - z-index and CSS rotate z-index 和变换问题 - Issue with z-index and transform CSS3变换旋转打破布局和堆叠顺序，取代z-index - CSS3 transform rotate breaks layout and stacking order, superseding z-index 具有动画变换的z-index错误 - z-index bug with animated transform z-index 在 safari 上失败 - 是转换问题吗？ - z-index fail on safari - is it a transform issue? Z-index在iframe视频的IE中不起作用 - Z-index not working in IE for iframe video HTML：视频z-index不起作用 - HTML: video z-index not working z-index问题，遮罩是否超过了视频？ - z-index issue, Mask is over video?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM