Lotie JS动画背景

问题描述

使用Lotie js，并希望像背景一样使用Lotie动画，但是动画涵盖了所有块。 Z索引无效。如何向下移动动画以使其他块可见？

.page {
    width: 100vw;
    height: 100vh;
    position:absolute;
  z-index:-999;
}
.text {
z-index:10000;
position:absolute;
width:500px;
font-size:30px;
}

<div class='page'><lottie-player src="https://assets7.lottiefiles.com/packages/lf20_nee43fld.json"  background="transparent"  speed="1"  style="width: 100%; height: 100%;"    autoplay></lottie-player>
<div class="text">ddddddddddd</div>
</div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

解决方法

尝试将z-index位置应用于播放器，而不是其父项“ .page”也包含“ .text”元素。

lottie-player {
    width: 100vw;
    height: 100vh;
    position:absolute;
  z-index:-999;
}
.text {
z-index:10000;
position:absolute;
width:500px;
font-size:30px;
}