Lottie js动画背景

Question

使用Lotie js 并希望使用像背景一样的lotie 动画，但动画覆盖了所有块。 Z-index 不起作用。如何将动画向下移动以便其他块可见？

.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>

Answer 1

尝试将 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;
}