可爱的js动画背景

Question

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

​

Answer 1

尝试将z索引定位应用于播放器，而不是它的父".page“，后者也包含".text”元素。

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