我有一个场景。画布上有各种组件。有视频,图片和常用材料。
如下图所示,视频(黑色)会阻止下面的图像,但是图像的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>
[查找一些数据,发现它可能与变换引起的上下文有关,但是稍加修改后,就更加令人困惑。
至少有三种方法可以使图片起作用:
#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>
#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>
#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的异常表现?我希望有人能给我答案。
您只需将视频的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
的中心