如何解决transform：rotate强制将视频置于所有元素之上
我有这个元素（.tas-fullscreen），其中包含一个.media-container和一个.content-container。媒体容器包含视频元素，内容容器包含文本。当不旋转.tas-fullscreen元素时，它看起来不错，但是当我旋转它时，video元素会自动放置在所有元素上方。文字元素应始终位于视频元素的顶部。
我尝试在.content-container上使用较高的z索引，而在.media-container上使用较低的z-index，但是没有任何效果。
这是一个简单的例子
.tas-fullscreen{
position: absolute;
left: 0px;
top:600px;
overflow: hidden;
z-index: 10;
height: 300px;
width: 600px;
font-size: 46px;
transform: rotate(-90deg);
transform-origin: 0% 0%;
display: flex;
}
.media-container{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}
.media-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index:10;
}
video{
object-fit: cover;
height: 100%;
width:100%;
z-index:0;
}<div class="tas-fullscreen">
<div>
<div class="media-container">
<video class="video" autoplay="true" loop="" muted="" data-origwidth="0" data-origheight="0"><source src="https://theadstore.io/wp-content/uploads/2020/09/dcf3ca22-d06f-44d1-b140-b7fdbf7faffa.mp4" type="video/mp4"></video>
</div>
<div class="media-content">
<div class="heading">
This is the header
</div>
<div class="body">
This is the body
</div>
</div>
</div>
</div>https://theadstore.io/?p=2232&a=niels
希望你能帮助我。
解决方法
给定的代码片段在Window10的FireFox上按预期/要求运行。它在W10的Edge上可以正常工作，因为文本出现在视频的顶部，但是视频被限制为全高（300px）和相应的（自动）宽度-似乎没有掩盖任何注意事项。在IOS13 Safari和Chrome上，视频转向并占据了整个宽度和高度，而没有变形（即，覆盖似乎起作用），但文本被隐藏了。问题中报告的正是这最后一种现象。
由于人们对Chrome感兴趣，因此寻求了一种可行的方法，并在此处给出。它需要两个带有tas-fullscreen类的外部div。第一个包含视频，并且div被赋予z-index -1（z-index 0或更高版本无效）。第二个包含文本，并具有较高的z-index。
<!DOCTYPE html>
<html>
<head>
<style>
.tas-fullscreen{
position: absolute;
left: 0px;
top:600px;
overflow: hidden;
height: 300px;
width: 600px;
font-size: 46px;
transform: rotate(-90deg);
transform-origin: 0% 0%;
display: flex;
}
.media-container{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}
.media-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index:10;
}
video{
positon: absolute;
object-fit: cover;
height: 100%;
width:100%;
}
</style>
</head>
<body>
<div class="tas-fullscreen" style="z-index:-1;">
<div>
<div class="media-container">
<video class="video" autoplay="true" loop="" muted="" data-origwidth="0" data-origheight="0"><source src="https://theadstore.io/wp-content/uploads/2020/09/dcf3ca22-d06f-44d1-b140-b7fdbf7faffa.mp4" type="video/mp4"></video>
</div>
</div>
</div>
<div class="tas-fullscreen" style="z-index:100;background-cyan:opacity:0.5;">
<div class="media-content">
<div class="heading">
This is the header
</div>
<div class="body">
This is the body
</div>
</div>
</div>
</body>
</html>
此代码段已在W10的Chrome和FF上进行了测试，似乎可以正常工作。它可以在Edge上工作，但视频不包含在内。该代码段也已经在Safari和iPadIOS13上的Chrome上进行了测试，并且看起来可以正常运行。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。