transform:rotate()强制将视频放在所有元素之上

我得到了这个元素(.tas-fullscreen)，它包含一个.media-container和一个.content-container。媒体容器包含视频元素，内容容器包含文本。当不旋转.tas-fullscreen元素时，它看起来很好，但当我旋转它时，video元素会自动放置在所有元素之上。text元素应该始终位于video元素的顶部。

我尝试在.content容器上设置高z索引，在.media容器上设置低索引，但没有任何效果。

下面是一个简单的例子

.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

希望你能帮助我。

转载请注明出处:http://www.jubohx.com/article/20230506/2008921.html