我绝对定位的particles.js覆盖了我的相对div

Question

https://codepen.io/AnonymousCaptain/pen/MWavMWm

<div class="outer-container">                  
  <div id="particles-js">
    <div class="your-content">
          <article id="3" class="bg-dusk transition md:group-hover:opacity-50 md:hover:opacity-important md:hover:scale-11/10x my-8">
            <h3 class="mt-8 text-lg font-semibold leading-tight text-zenith">3</h3>
            <p class="mt-8">Lorem ipsum dolor sit amet, et suspendisse mauris molestie, libero wisi a nulla, laoreet dolor tortor orci, amet debitis enim ultricies fermentum.</p>
          </article>
    </div>
  </div>
</div>

请帮助我解决重叠问题。除此之外...我想知道您是否应该改为使用基于Vue的粒子组件？

Answer 1

#particles-js {
  position: relative;
}

将修复它。 但是，如Uchendu所建议...在示例中使用大量代码的方式。